[转载]jQuery EasyUI MC3的应用实例 – wikstone – 博客园.
之前写过一个WebForm和JQuery EasyUI结合的实例，一个用户管理，主要是帮助大家怎样把WebForm及MVC和EasyUI结合起来做项目。这里只有简单实例及入门方法，下面就主要贴图及附源码供大家下载！
这里依然套用疯狂秀才的界面。代码有借鉴博客园一哥们，并进行了修改。
此部分代码可以参考之前WebForm
列表页面：
添加页面：
主要一个了自带控件没有直接使用客户端控件，随后整理全部使用EasyUI控件，表达你提交此处使用了JQuery form提交
下面附上通用js代码：
View Code
<script type="text/javascript">
$(function () {
InitGird();
InitSearch();
});
//初始化表格
function InitGird() {
$('#tab_list').datagrid({
title: '用户列表', //表格标题
url: '@Url.Action("List","User")', //请求数据的页面
sortName: 'ID', //排序字段
idField: 'ID', //标识字段,主键
iconCls: '', //标题左边的图标
nowrap: false, //是否换行，True 就会把数据显示在一行里
striped: true, //True 奇偶行使用不同背景色
collapsible: false, //可折叠
sortOrder: 'desc', //排序类型
remoteSort: true, //定义是否从服务器给数据排序
fit: true,
fitColumns: true, //自适应
frozenColumns: [[//冻结的列，不会随横向滚动轴移动
{field: 'cbx', checkbox: true },
{ title: '账号', field: 'UserName', width: 150, sortable: true },
{ title: '真实姓名', field: 'RealName', width: 150 }
]],
columns: [[
{ title: '所属角色', field: 'Role', formatter: function (value, rec, index) { return value == 0 ? '管理员' : '普通用户' }, width: 120 },
{ title: '是否超级管理员', field: 'IsAdmin', formatter: function (value, rec, index) { return value == 0 ? '否' : '是' }, width: 100 },
{ title: '邮箱地址', field: 'Email', width: 150 },
{ title: '操作', field: 'ID', width: 80, formatter: function (value, rec) {
return '<a style="color:red" href="javascript:;" onclick="EditData(' + value + ');$(this).parent().click();return false;">修改</a>';
}
}
]],
toolbar: "#toolbar",
pagination: true, //是否开启分页
pageNumber: 1,
pageSize: 10,
pageList: [10, 20, 30, 40, 50],
rownumbers: true //行号
});
}
//初始化搜索框
function InitSearch() {
$("#ipt_search").searchbox({
width: 200,
iconCls: 'icon-save',
searcher: function (val, name) {
$('#tab_list').datagrid('options').queryParams.search_type = name;
$('#tab_list').datagrid('options').queryParams.search_value = val;
$('#tab_list').datagrid('reload');
},
prompt: '请输入要查询的账号'
});
}
//打开添加窗口
function AddData() {
var url_str = '@Url.Action("Create","User")';
$('#Creat_Dialog').load(url_str, function () {
$(this).dialog({
title: '添加用户',
modal: true,
loadingMessage: '正在加载...',
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
$('#add_form').submit();
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#Creat_Dialog').dialog('close');
}
}
]
});
}).show();
}
//打开编辑窗口
function EditData(id) {
if (id != undefined) {
var url = '@Url.Action("Edit","User")/' + id;
$('#Edit_Dialog').load(url, function () {
$(this).dialog({
title: '编辑用户',
modal: true,
loadingMessage: '正在加载...',
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
$('#edit_form').submit();
}
}, {
text: '取消',
iconCls: 'icon-cancel',
handler: function () {
$('#Edit_Dialog').dialog('close');
}
}]
});
}).show();
}
}
//添加AJAX提交
function ajaxAdd() {
$('#add_form').ajaxSubmit({
url: '@Url.Action("Create","User")',
beforeSubmit: function () {
// console.info($('#add_form').form('validate'));
if ($('#add_form').form('validate') != true) {
return false;
}
if ($("#add_form").valid() != true) {
return false;
}
return true;
},
success: function (data) {
if (data == true) {
$('#Creat_Dialog').dialog('close');
$('#tab_list').datagrid('reload');
$.messager.show({
title: '提示',
msg: '保存成功',
timeout: 2000,
showType: 'slide'
});
} else {
$.messager.show({
title: '提示',
msg: '保存失败:' + data,
timeout: 0,
showType: 'slide'
});
}
}
});
return false;
}
//编辑AJAX提交
function ajaxEdit() {
$('#edit_form').ajaxSubmit({
url: '@Url.Action("Edit","User")',
beforeSubmit: function () {
if ($('#edit_form').form('validate') != true) {
return false;
}
if ($("#edit_form").valid() != true) {
return false;
}
return true;
},
success: function (data) {
if (data == true) {
$('#Edit_Dialog').dialog('close');
$('#tab_list').datagrid('reload');
$.messager.show({
title: '提示',
msg: '保存成功',
timeout: 2000,
showType: 'slide'
});
} else {
$.messager.show({
title: '提示',
msg: '保存失败:' + data,
timeout: 0,
showType: 'slide'
});
}
}
});
return false;
}
//删除
function DelData(id) {
var selected = "";
if (id <= 0) {
$($('#tab_list').datagrid('getSelections')).each(function () {
selected += this.ID + ",";
});
selected = selected.substr(0, selected.length - 1);
if (selected == "") {
$.messager.alert('提示', '请选择要删除的数据！', 'info');
return;
}
}
else {
selected = id;
}
if (id != undefined) {
$.messager.confirm('确认', '确定删除?', function (r) {
if (r) {
var url = '@Url.Action("Delete","User")/' + selected;
$.post(url, function () {
}).success(function (data) {
var msgstr = "删除成功";
if (data != true) {
msgstr = "删除失败" + data;
$.messager.show({
title: '提示',
msg: msgstr,
timeout: 0,
showType: 'slide'
});
} else {
$('#tab_list').datagrid('reload');
selected = '';
$.messager.show({
title: '提示',
msg: msgstr,
timeout: 3000,
showType: 'slide'
});
}
$('#tab_list').datagrid('reload');
}).error(function () {
$.messager.alert('错误', '删除发生错误');
});
}
});
}
}
</script>
今天简单就到这里吧！QQ群：92257772 希望大家能够共同学习。
下载链接
Mikel
我们可以很清楚的看到加载了哪些类型的文件，已经文件的大小。
