EasyUI之dataGrid的行内编辑

　　这个js代码是别人写的，可能不是最好的，但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了，这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单，这里就不贴了。前台效果图因为比较懒，也不贴了。

　　

$(function () {var datagrid; //定义全局变量datagridvar editRow = undefined; //定义全局变量：当前编辑的行datagrid = TskupluAddPacket.datagrid({
                url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //请求的数据源iconCls: 'icon-save', //图标pagination: true, //显示分页pageSize: 15, //页大小pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数fit: true, //datagrid自适应宽度fitColumn: false, //列自适应宽度striped: true, //行背景交换nowap: true, //列内容多时自动折至第二行border: false,
                idField: 'packetid', //主键sortName : 'packetid',                                                                    //排序字段sortOrder : 'desc',                                    //排序方式columns: [[//显示的列{field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
                        { field: 'packunit', title: '包装单位', width: 100, sortable: true,
                                editor: { type: 'validatebox', options: { required: true} }
                        },
                        { field: 'packqty', title: '包装细数', width: 100,
                                editor: { type: 'validatebox', options: { required: true} }
                        },
                        { field: 'packspec', title: '包装规格', width: 100,
                                editor: { type: 'validatebox', options: { required: true} }
                        }
                ]],
                queryParams: { 
                    pluid: $('#addpluid').val()
                }, //查询参数toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等//添加时如果没有正在编辑的行，则在datagrid的第一行插入一行if (editRow == undefined) {                                         
                                datagrid.datagrid("insertRow", {
                                        index: 0, // index start with 0                                        row: {}
                                });                   //将新插入的那一行开户编辑状态datagrid.datagrid("beginEdit", 0);//给当前编辑的行赋值editRow = 0;
                        }

                }
                }, '-',
                { text: '删除', iconCls: 'icon-remove', 
                    handler: function () {                         //删除时先获取选择行 var rows = datagrid.datagrid("getSelections");                         //选择要删除的行 if (rows.length > 0) {
                                $.messager.confirm("提示", "你确定要删除吗?", function (r) {if (r) {var ids = [];for (var i = 0; i < rows.length; i++) {
                                            ids.push(rows[i].packetid);
                                        }//将选择到的行存入数组并用,分隔转换成字符串，//本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id//alert(ids.join(&#39;,&#39;));                                        $.ajax({
                                            url : ThinkPHP[&#39;MODULE&#39;] + &#39;/Tskuplu/deletePacket&#39;,
                                            type : &#39;POST&#39;,
                                            data : {
                                                ids : ids.join(&#39;,&#39;)
                                            },
                                            beforeSend : function (){
                                                $.messager.progress({
                                                    text : &#39;正在处理中...&#39;});    
                                            },
                                            success : function (data){
                                                $.messager.progress(&#39;close&#39;);if (data >0){
                                                    datagrid.datagrid('reload');
                                                    $.messager.show({
                                                        title : '操作提醒',
                                                        msg   : data + '条数据被成功删除！'})
                                                } else if( data == -999 ) {
                                                    $.messager.alert('删除失败', '对不起，您没有权限！', 'warning');
                                                } else {
                                                    $.messager.alert('删除失败', '没有删除任何数据！', 'warning');
                                                }
                                            }
                                        });                                    
                                    }
                                });
                         } else {
                                $.messager.alert("提示", "请选择要删除的行", "error");
                         } 
                    }
                }, '-',
                { text: '修改', iconCls: 'icon-edit', 
                    handler: function () {//修改时要获取选择到的行var rows = datagrid.datagrid("getSelections");//如果只选择了一行则可以进行修改，否则不操作if (rows.length == 1) {//当无编辑行时if (editRow == undefined) {//获取到当前选择行的下标var index = datagrid.datagrid("getRowIndex", rows[0]);//开启编辑datagrid.datagrid("beginEdit", index);//把当前开启编辑的行赋值给全局变量editRoweditRow = index;//当开启了当前选择行的编辑状态之后，//应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑datagrid.datagrid("unselectAll");
                            }
                        }
                    }
                }, '-',
                { text: '保存', iconCls: 'icon-save', 
                    handler: function () {                         //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit", editRow);  
                         editRow = undefined;
                    }
                }, '-',
                { text: '取消编辑', iconCls: 'icon-redo', 
                    handler: function () {                         //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow = undefined;
                         datagrid.datagrid("rejectChanges");
                         datagrid.datagrid("unselectAll");
                    }
                }, '-'],
                onAfterEdit: function (rowIndex, rowData, changes) {//endEdit该方法触发此事件                     //var row = datagrid.datagrid("getData").rows[rowIndex];  //获取某一行的值  var inserted = datagrid.datagrid('getChanges','inserted');var updated  = datagrid.datagrid('getChanges','updated');if(inserted.length < 1 && updated.length <1){
                        editRow = undefined;
                        datagrid.datagrid(&#39;unselectAll&#39;);return;
                    }var url = &#39;&#39;;if(inserted.length>0){
                        url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
                    }if(updated.length>0){
                        url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
                    }
                          
                    $.ajax({
                       url : url,
                       type : 'POST',
                       data : {                           'pluid': $('#addpluid').val(),                           'packetid':rowData.packetid,                           'packunit':rowData.packunit,                           'packqty' :rowData.packqty,                           'packspec':rowData.packspec
                       },
                       beforeSend : function (){
                           $.messager.progress({
                               text : '正在处理中...'   })
                       },
                       success : function (data){
                           $.messager.progress('close');                           if (data > 0){  
                                datagrid.datagrid("acceptChanges");  
                                $.messager.show({
                                    title : '操作提示',
                                    msg : '添加成功'});            
                                editRow = undefined;
                                datagrid.datagrid("reload");  
                               $('#addcheck').val(1);
                           } else if (data == -999) {
                               $.messager.alert('添加失败', '抱歉！您没有权限！', 'warning');
                           } else {
                               datagrid.datagrid("beginEdit",editRow); 
                               $.messager.alert('警告操作', '未知错误！请重新刷新后提交！', 'warning');
                           }
                           datagrid.datagrid("unselectAll");  
                       }
                    });//////////////////                                                                  },
                onDblClickRow: function (rowIndex, rowData) {//双击开启编辑行if (editRow == undefined) {
                            datagrid.datagrid("beginEdit", rowIndex);
                            editRow = rowIndex;
                    }
                }
        });      
    });

 

Atas ialah kandungan terperinci EasyUI之dataGrid的行内编辑. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!