一篇关于JQueryEasyUI学习之datagrid 添加、修改、删除 学习笔记教程有需要了解的朋友可参考本的笔记,批量删除,双击表单修改、选中行修改,增加行修改,再有就是扩展editor的方法,无需废话,直接上代码,代码中的注释写的很详细
0) {//选中几行的话触发事件
$.message.confirm("提示","您确定要删除这些数据吗?",function (res) {//提示是否删除
if (res) {
var codes = {};
for (var i = 0; i < rows.length; i++) {
codes.push(rows[i].code);
}
console.info(codes.join(','));//拼接字符串并传递到后台处理数据,循环删除,成功后刷新datagrid
}
});
}
}
},{
text: "修改",iconCls: "icon-edit",handler: function () {
//选中一行进行编辑
var rows = $("#dg").datagrid('getSelections');
if (rows.length == 1) {//选中一行的话触发事件
if (editFlag != undefined) {
$("#dg").datagrid('endEdit',editFlag);//结束编辑,传入之前编辑的行
}
if (editFlag == undefined) {
var index = $("#dg").datagrid('getRowIndex',rows[0]);//获取选定行的索引
$("#dg").datagrid('beginEdit',index);//开启编辑并传入要编辑的行
editFlag = index;
}
}
}
},{
text: "保存",iconCls: "icon-save",handler: function () {
$("#dg").datagrid('endEdit',editFlag);
}
},{
text: "撤销",iconCls: "icon-redo",handler: function () {
editFlag = undefined;
$("#dg").datagrid('rejectChanges');
}
},'-'],onAfterEdit: function (rowIndex,rowData,changes) {//在添加完毕endEdit,保存时触发
console.info(rowData);//在火狐浏览器的控制台下可看到传递到后台的数据,这里我们就可以利用这些数据异步到后台添加,添加完成后,刷新datagrid
editFlag = undefined;//重置
},onDblClickCell: function (rowIndex,field,value) {//双击该行修改内容
if (editFlag != undefined) {
$("#dg").datagrid('endEdit',editFlag);//结束编辑,传入之前编辑的行
}
if (editFlag == undefined) {
$("#dg").datagrid('beginEdit',rowIndex);//开启编辑并传入要编辑的行
editFlag = rowIndex;
}
}
});
});
//点击查找按钮出发事件
function searchFunc() {
alert("123");
$("#dg").datagrid("load",sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台
//这里介绍reload的使用,使用reload时,会默认记住当前页面,当点击查询时,如果我们查到的数据只有三条,我们每页显示10挑数据,当前页码是2,那么我们将无法在当前页面看到我们查询出的结果,只有将页面向前跳转才会看到,但是用load就不会出现这种情况
}
//点击清空按钮出发事件
function clearSearch() {
$("#dg").datagrid("load",{});//重新加载数据,无填写数据,向后台传递值则为空
$("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空
}
查询'" style="height: 100px; background: #F4F4F4;">