jqgrid 使用自帶的行編輯

上篇jqgrid 單擊行啟用行編輯，切換行保存原編輯行

本篇，說說使用jqgrid自帶的行編輯

1）設置需要編輯的列  editable: true 

colModel: [
            { label: '字段編碼', name: 'FieldCode', key: true, width: 180, editable: false },
             {
                 label: '字段名稱',
                 name: 'FieldName',
                 width: 150,
                 editable: true,
                 edittype: "text",
                 editrules: { required: true }
             },
              {
                  label: '字段類型',
                  name: 'DataType',
                  width: 10,
                  hidden: true,
                  editable: true,
              },
              {
                  label: '是否排序',
                  name: 'IsOrder',
                  width: 80,
                  editable: true,
                  edittype: "select",
                  editoptions: {
                      //value: "true:是;false:否"
                      value: "true:true;false:false"
                  }
              },
               {
                   label: '列寬',
                   name: 'Width',
                   width: 55,
                   editable: true,
                   editrules: { required: true, integer: true },
                   edittype: "text"
               }]

2）設置底部按鈕按鈕區

    $('#fieldGrid').navGrid("#fieldGridPager", { edit: false, add: false, del: false, refresh: false, view: false });
    $('#fieldGrid').inlineNav('#fieldGridPager',
                // the buttons to appear on the toolbar of the grid
                {
                    edit: true,
                    add: false,
                    del: true,
                    cancel: true,
                    editParams: {
                        keys: true,
                    },
                    addParams: {
                        keys: true
                    }
    });

 注意：使用自帶的編輯不需要設置行選中屬性 onSelectRow

需要特別注意：不能同時支持內置行編輯和行事件觸發的行編輯。會產生行結束編輯的干擾項，比較坑，請繞開。若要使用行編輯請分別采用以下某一種方式

jqgrid 單擊行啟用行編輯，切換行保存原編輯行

jqgrid 使用自帶的行編輯