JQuery EasyUI学习教程之datagrid 添加、修改、删除操作

前端之家收集整理的这篇文章主要介绍了JQuery EasyUI学习教程之datagrid 添加、修改、删除操作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一篇关于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;">
用户姓名: 创建开始时间 创建结束时间

扩展editor方法:datetimeBox

Box方法*/ $.extend($.fn.datagrid.defaults.editors,{ datetimeBox: {//为方法取名 init: function (container,options) { var editor = $('').appendTo(container); options.editable = false;//设置其不能手动输入 editor.datetimeBox(options); return editor; },getValue: function (target) {//取值 return $(target).datetimeBox('getValue'); },setValue: function (target,value) {//设置值 $(target).datetimeBox('setValue',value); },resize: function (target,width) { $(target).datetimeBox('resize',width); },destroy: function (target) { $(target).datetimeBox('destroy');//销毁生成的panel } } }); });

以上所述是小编给大家介绍的JQuery EasyUI datagrid 添加修改删除操作的全部叙述,希望对大家有所帮助,如果大家想了解更多内容敬请关注编程之家网站!

猜你在找的jQuery相关文章