EasyUI之dataGrid的行内编辑
Posted luxd
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了EasyUI之dataGrid的行内编辑相关的知识，希望对你有一定的参考价值。
1 $(function () { 2 var datagrid; //定义全局变量datagrid 3 var editRow = undefined; //定义全局变量：当前编辑的行 4 datagrid = TskupluAddPacket.datagrid({ 5 url: Thinkphp[‘MODULE‘] + ‘/Tskuplu/getPacketList‘, //请求的数据源 6 iconCls: ‘icon-save‘, //图标 7 pagination: true, //显示分页 8 pageSize: 15, //页大小 9 pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数 10 fit: true, //datagrid自适应宽度 11 fitColumn: false, //列自适应宽度 12 striped: true, //行背景交换 13 nowap: true, //列内容多时自动折至第二行 14 border: false, 15 idField: ‘packetid‘, //主键 16 sortName : ‘packetid‘, //排序字段 17 sortOrder : ‘desc‘, //排序方式 18 columns: [[//显示的列 19 {field: ‘packetid‘, title: ‘ID‘, width: 100, sortable: true, checkbox: true }, 20 { field: ‘packunit‘, title: ‘包装单位‘, width: 100, sortable: true, 21 editor: { type: ‘validatebox‘, options: { required: true} } 22 }, 23 { field: ‘packqty‘, title: ‘包装细数‘, width: 100, 24 editor: { type: ‘validatebox‘, options: { required: true} } 25 }, 26 { field: ‘packspec‘, title: ‘包装规格‘, width: 100, 27 editor: { type: ‘validatebox‘, options: { required: true} } 28 } 29 ]], 30 queryParams: { 31 pluid: $(‘#addpluid‘).val() 32 }, //查询参数 33 toolbar: [{ text: ‘添加‘, iconCls: ‘icon-add‘, handler: function () {//添加列表的操作按钮添加，修改，删除等 34 //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行 35 if (editRow == undefined) { 36 datagrid.datagrid("insertRow", { 37 index: 0, // index start with 0 38 row: {} 39 }); 40 //将新插入的那一行开户编辑状态 41 datagrid.datagrid("beginEdit", 0); 42 //给当前编辑的行赋值 43 editRow = 0; 44 } 45 46 } 47 }, ‘-‘, 48 { text: ‘删除‘, iconCls: ‘icon-remove‘, 49 handler: function () { 50 //删除时先获取选择行 51 var rows = datagrid.datagrid("getSelections"); 52 //选择要删除的行 53 if (rows.length > 0) { 54 $.messager.confirm("提示", "你确定要删除吗?", function (r) { 55 if (r) { 56 var ids = []; 57 for (var i = 0; i < rows.length; i++) { 58 ids.push(rows[i].packetid); 59 } 60 //将选择到的行存入数组并用,分隔转换成字符串， 61 //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id 62 //alert(ids.join(‘,‘)); 63 $.ajax({ 64 url : ThinkPHP[‘MODULE‘] + ‘/Tskuplu/deletePacket‘, 65 type : ‘POST‘, 66 data : { 67 ids : ids.join(‘,‘) 68 }, 69 beforeSend : function (){ 70 $.messager.progress({ 71 text : ‘正在处理中...‘ 72 }); 73 }, 74 success : function (data){ 75 $.messager.progress(‘close‘); 76 if (data >0){ 77 datagrid.datagrid(‘reload‘); 78 $.messager.show({ 79 title : ‘操作提醒‘, 80 msg : data + ‘条数据被成功删除！‘ 81 }) 82 } else if( data == -999 ) { 83 $.messager.alert(‘删除失败‘, ‘对不起，您没有权限！‘, ‘warning‘); 84 } else { 85 $.messager.alert(‘删除失败‘, ‘没有删除任何数据！‘, ‘warning‘); 86 } 87 } 88 }); 89 } 90 }); 91 } else { 92 $.messager.alert("提示", "请选择要删除的行", "error"); 93 } 94 } 95 }, ‘-‘, 96 { text: ‘修改‘, iconCls: ‘icon-edit‘, 97 handler: function () { 98 //修改时要获取选择到的行 99 var rows = datagrid.datagrid("getSelections"); 100 //如果只选择了一行则可以进行修改，否则不操作 101 if (rows.length == 1) { 102 //当无编辑行时 103 if (editRow == undefined) { 104 //获取到当前选择行的下标 105 var index = datagrid.datagrid("getRowIndex", rows[0]); 106 //开启编辑 107 datagrid.datagrid("beginEdit", index); 108 //把当前开启编辑的行赋值给全局变量editRow 109 editRow = index; 110 //当开启了当前选择行的编辑状态之后， 111 //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑 112 datagrid.datagrid("unselectAll"); 113 } 114 } 115 } 116 }, ‘-‘, 117 { text: ‘保存‘, iconCls: ‘icon-save‘, 118 handler: function () { 119 //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 120 datagrid.datagrid("endEdit", editRow); 121 editRow = undefined; 122 } 123 }, ‘-‘, 124 { text: ‘取消编辑‘, iconCls: ‘icon-redo‘, 125 handler: function () { 126 //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 127 editRow = undefined; 128 datagrid.datagrid("rejectChanges"); 129 datagrid.datagrid("unselectAll"); 130 } 131 }, ‘-‘], 132 onAfterEdit: function (rowIndex, rowData, changes) { 133 //endEdit该方法触发此事件 134 //var row = datagrid.datagrid("getData").rows[rowIndex]; //获取某一行的值 135 var inserted = datagrid.datagrid(‘getChanges‘,‘inserted‘); 136 var updated = datagrid.datagrid(‘getChanges‘,‘updated‘); 137 if(inserted.length < 1 && updated.length <1){ 138 editRow = undefined; 139 datagrid.datagrid(‘unselectAll‘); 140 return; 141 } 142 var url = ‘‘; 143 if(inserted.length>0){ 144 url=ThinkPHP[‘MODULE‘] + ‘/Tskuplu/addPacket‘; 145 } 146 if(updated.length>0){ 147 url=ThinkPHP[‘MODULE‘] + ‘/Tskuplu/updatePacket‘; 148 } 149 150 $.ajax({ 151 url : url, 152 type : ‘POST‘, 153 data : { 154 ‘pluid‘: $(‘#addpluid‘).val(), 155 ‘packetid‘:rowData.packetid, 156 ‘packunit‘:rowData.packunit, 157 ‘packqty‘ :rowData.packqty, 158 ‘packspec‘:rowData.packspec 159 }, 160 beforeSend : function (){ 161 $.messager.progress({ 162 text : ‘正在处理中...‘ 163 }) 164 }, 165 success : function (data){ 166 $.messager.progress(‘close‘); 167 if (data > 0){ 168 datagrid.datagrid("acceptChanges"); 169 $.messager.show({ 170 title : ‘操作提示‘, 171 msg : ‘添加成功‘ 172 }); 173 editRow = undefined; 174 datagrid.datagrid("reload"); 175 $(‘#addcheck‘).val(1); 176 } else if (data == -999) { 177 $.messager.alert(‘添加失败‘, ‘抱歉！您没有权限！‘, ‘warning‘); 178 } else { 179 datagrid.datagrid("beginEdit",editRow); 180 $.messager.alert(‘警告操作‘, ‘未知错误！请重新刷新后提交！‘, ‘warning‘); 181 } 182 datagrid.datagrid("unselectAll"); 183 } 184 }); 185 ////////////////// 186 }, 187 onDblClickRow: function (rowIndex, rowData) { 188 //双击开启编辑行 189 if (editRow == undefined) { 190 datagrid.datagrid("beginEdit", rowIndex); 191 editRow = rowIndex; 192 } 193 } 194 }); 195 });
以上是关于EasyUI之dataGrid的行内编辑的主要内容，如果未能解决你的问题，请参考以下文章