国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

EasyUI中的dataGrid的行內(nèi)編輯

2019-11-19 16:16:56
字體:
供稿:網(wǎng)友

這個js代碼是別人寫的,可能不是最好的,但我個人覺得首先能幫助別人解決功能問題的話就特別好。我稍加修改后用在了自己的項目上了,這里貼出來分享一下。后臺用的TinkPHP因為都是查增刪改比較簡單,這里就不貼了。前臺效果圖因為比較懶,也不貼了。

$(function () {    var datagrid; //定義全局變量datagrid    var editRow = undefined; //定義全局變量:當前編輯的行    datagrid = TskupluAddPacket.datagrid({        url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //請求的數(shù)據(jù)源        iconCls: 'icon-save', //圖標        pagination: true, //顯示分頁        pageSize: 15, //頁大小        pageList: [15, 30, 45, 60], //頁大小下拉選項此項各value是pageSize的倍數(shù)        fit: true, //datagrid自適應(yīng)寬度        fitColumn: false, //列自適應(yīng)寬度        striped: true, //行背景交換        nowap: true, //列內(nèi)容多時自動折至第二行        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: '包裝細數(shù)', width: 100,                editor: { type: 'validatebox', options: { required: true} }            },            { field: 'packspec', title: '包裝規(guī)格', width: 100,                editor: { type: 'validatebox', options: { required: true} }            }        ]],        queryParams: {           pluid: $('#addpluid').val()        }, //查詢參數(shù)        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按鈕添加,修改,刪除等            //添加時如果沒有正在編輯的行,則在datagrid的第一行插入一行            if (editRow == undefined) {                                     datagrid.datagrid("insertRow", {                    index: 0, // index start with 0                    row: {}                });                          //將新插入的那一行開戶編輯狀態(tài)                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);                    }                    //將選擇到的行存入數(shù)組并用,分隔轉(zhuǎn)換成字符串,                    //本例只是前臺操作沒有與數(shù)據(jù)庫進行交互所以此處只是彈出要傳入后臺的id                    //alert(ids.join(','));                    $.ajax({                      url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',                      type : 'POST',                      data : {                        ids : ids.join(',')                      },                      beforeSend : function (){                        $.messager.progress({                          text : '正在處理中...'                        });                        },                      success : function (data){                        $.messager.progress('close');                        if (data >0){                          datagrid.datagrid('reload');                          $.messager.show({                            title : '操作提醒',                            msg  : data + '條數(shù)據(jù)被成功刪除!'                          })                        } else if( data == -999 ) {                          $.messager.alert('刪除失敗', '對不起,您沒有權(quán)限!', 'warning');                        } else {                          $.messager.alert('刪除失敗', '沒有刪除任何數(shù)據(jù)!', '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);                //把當前開啟編輯的行賦值給全局變量editRow                editRow = index;                //當開啟了當前選擇行的編輯狀態(tài)之后,                //應(yīng)該取消當前列表的所有選擇行,要不然雙擊之后無法再選擇其他行進行編輯                datagrid.datagrid("unselectAll");              }            }          }        }, '-',        { text: '保存', iconCls: 'icon-save',           handler: function () {             //保存時結(jié)束當前編輯的行,自動觸發(fā)onAfterEdit事件如果要與后臺交互可將數(shù)據(jù)通過Ajax提交后臺             datagrid.datagrid("endEdit", editRow);              editRow = undefined;          }        }, '-',        { text: '取消編輯', iconCls: 'icon-redo',           handler: function () {             //取消當前編輯行把當前編輯行罷undefined回滾改變的數(shù)據(jù),取消選擇的行             editRow = undefined;             datagrid.datagrid("rejectChanges");             datagrid.datagrid("unselectAll");          }        }, '-'],        onAfterEdit: function (rowIndex, rowData, changes) {          //endEdit該方法觸發(fā)此事件                     //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('unselectAll');            return;          }          var url = '';          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('添加失敗', '抱歉!您沒有權(quán)限!', '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;          }        }    });     });

以上所述是小編給大家介紹的EasyUI中的dataGrid的行內(nèi)編輯,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持!

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 湘西| 玛多县| 团风县| 武强县| 肃北| 崇信县| 黄梅县| 获嘉县| 西安市| 黎川县| 晴隆县| 舒兰市| 梧州市| 邓州市| 惠水县| 南溪县| 蒙自县| 静宁县| 邵阳县| 松原市| 集贤县| 富阳市| 平利县| 浠水县| 长宁县| 饶阳县| 城市| 将乐县| 安龙县| 西和县| 志丹县| 博湖县| 阳朔县| 阳高县| 林周县| 凤阳县| 贞丰县| 湄潭县| 武川县| 东港市| 繁昌县|