EasyUI 1.3 + MVC 表格基础实例(分页查询，修改和删除)
$(function () {
var lastIndex;
$("#tab").datagrid({
url: "/Account/GetAll", //默认为Post请求
fitColumns: true,
idField: 'MemberId', //设置主键列
columns: [[
{ title: '', checkbox: true },
{ field: 'MemberId', hidden: true },
{ title: '会员账号', field: 'MemberName', editor: 'text', required: true },
{ title: '性别', field: 'Sex', formatter: function (value, record, rowIndex) {
if (value == "1")
return "男";
else
return "女";
}, editor: {
type: 'combobox',
options: {
valueField: 'id',
textField: 'text',
data: [{ text: '男', id: '1' }, { text: '女', id: '0'}],
editable: false
}
}
},
{
title: '出生日期', field: 'Birthday', editor: 'datebox', formatter: formatDatebox
} ,
{
title: '操作', field: 'operating', formatter: function (value, record, rowIndex) {
lastIndex = rowIndex;
$("#tab").datagrid('endEdit', lastIndex);
return "<a href='/Home/Index'>首页" + "</a> <a href='/Account/Delete?memberId=" + record.MemberId + "'> 删除</a>";
}
}
]],
pageList: [5, 10, 30], //可选的pageSize
pagination: true, //设置分页
singleSelect: true, //单选
striped: true,
pageSize: 5,
remoteSort: true,
rownumbers: true,
sortName: 'MemberId',
sortOrder: 'asc',
toolbar: [{
id: 'btn_add',
text: '注册',
handler: function () {
$("#tab").datagrid('endEdit', lastIndex);
$("#tab").datagrid('appendRow', { MemberName: '', Sex: '1', Birthday: new Date() });
//提交插入的行
$('#tab').datagrid('acceptChanges');//若没有这一句，输入的值是没有保存的，点击保存时只能取到空值或者默认值
lastIndex = $("#tab").datagrid('getRows').length - 1;
$('#tab').datagrid('selectRow', lastIndex);
$('#tab').datagrid('beginEdit', lastIndex);
}
}, {
id: 'btn_delete',
text: '删除',
handler: function () {
$("#tab").datagrid('endEdit', lastIndex);
var rows = $("#tab").datagrid('getSelections');
if (rows == null || rows == "") {
alert('请先选择一行');
return;
}
$.messager.confirm('删除确认', '确认删除吗?', function (value) {
if (value) {
var memberId = "";
for (var i = 0; i < rows.length; i++) {
if (rows[i].MemberId == undefined)
continue;
memberId += "," + rows[i].MemberId;
}
$.ajax({
url: '/Account/Delete',
data: { memberId: memberId },
success: function (response) {
$("#tab").datagrid('reload');
}
});
}
});
}
}, {
id: 'btn_save',
text: '保存',
handler: function () {
var updateRecords = $("#tab").datagrid('getChanges', 'updated'); //获取修改记录
var insertRecords = $("#tab").datagrid('getChanges', 'inserted'); //获取插入纪录
for (var i = 0; i < insertRecords.length; i++) {
var memberName = insertRecords[i].MemberName;
var sex = insertRecords[i].Sex;
var birthday = insertRecords[i].Birthday;
// 注册
$.ajax({
url: '/Account/Add',
data: { memberName: memberName, sex: sex, birthday: birthday },
success: function (response) {
$("#tab").datagrid('reload');
}
});
}
for (var i = 0; i < updateRecords.length; i++) {
var memberId = updateRecords[i].MemberId;
var memberName = updateRecords[i].MemberName;
var sex = updateRecords[i].Sex;
var birthday = updateRecords[i].Birthday;
//修改
$.ajax({
url: '/Account/Update',
data: { memberId: memberId, memberName: memberName, sex: sex, birthday: birthday },
success: function (response) {
$("#tab").datagrid('reload');
}
});
}
$("#tab").datagrid('endEdit', lastIndex);
}
}],
onDblClickRow: function (rowIndex) {
// if (lastIndex != rowIndex) {
// $('#tab').datagrid('endEdit', lastIndex);
// $('#tab').datagrid('beginEdit', rowIndex);
// }
// lastIndex = rowIndex;
$("#mess").window({
width: 400,
height: 200,
modal: true
});
$("#mess").show();
$("#borth").datebox({
formatter: function (val) {
return val.format("yyyy-MM-dd");
}
});
},
onBeforeLoad: function (value) {
//设置分页栏显示格式
$("#tab").datagrid('getPager').pagination({
beforePageText: '第',
afterPageText: '页,共{pages}页',
displayMsg: '当前第{from}-{to}条,共{total}条纪录'
});
}
});
//以下为日期格式的转换
function formatDatebox(value) {
if (value == null || value == '') {
return '';
}
var dt;
if (value instanceof Date) {
dt = value;
}
else {
dt = new Date(value);
if (isNaN(dt)) {
value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //原来的Json中日期格式为\/Date(1324224000000)\/,将其转换成正常的JS日期格式
dt = new Date();
dt.setTime(value);
}
}
return dt.format("yyyy-MM-dd"); //这里用到一个javascript的Date类型的拓展方法，这个是自己添加的拓展方法，在后面重写Date.format时定义
};
//重写datagrid编辑时type为datebox
$.extend($.fn.datagrid.defaults.editors, {
datebox: {
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
input.datebox(options);
return input;
},
destroy: function (target) {
$(target).datebox('destroy');
},
getValue: function (target) {
return $(target).datebox('getValue');
},
setValue: function (target, value) {
$(target).datebox('setValue', formatDatebox(value));
},
resize: function (target, width) {
$(target).datebox('resize', width);
}
}
});
//重写Date.prototype.format
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format))
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
return format;
};
});
其实EasyUI和ExtJS在某些上面都很相似，在后台处理上基本一样，只是参数和和method不一样
删除、修改和新增而已大致相同
主需注意：查询默认是POST请求，增删改默认是GET请求，最后的效果图为：
若双击弹出窗体，或直接在单元格上编辑，抑或跳转页面显示都可
