可編輯表格常用屬性

colModel: [

{label: "主鍵ID", name: "hellop1",hidden:true},

{label: "列明", name: "hellop2",align: "center", editable: true, edittype: 'text', editrules: { required: true } }

editable： true|false 表示該cell是否支持可編輯，默認為false。對hidden屬性默認不支持編輯，當然也可以通過其他方式來實現 edittype：簡單說就是當前cell在編輯狀態下是按照哪種input類型，因為在編輯下會轉化為,于是支持的輸入類型當然包括：'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'還有custom，默認為text

editoptions：一個數組用來設置edittype屬性，通過該屬性來限定input中各屬性的值，比如：

edittype="text", editoptions: {size:10, maxlength: 15}

edittype="textarea", editoptions: {rows:"2",cols:"10"}

edittype="textarea",editoptions: { value:"Yes:No" }

edittype="select",editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” }//對于多選的支持：editoptions: {multiple:true, size:3... }

//當edittype為custom時需要有兩個函數，一個用來創建該元素(custom_element另外一個對其賦值(custom_value)，如

edittype:'custom', editoptions:{

custom_element: function(value, options){

},

custom_value:function(elem, operation, value){

}

}

editrules： 用于設置一些用于可編輯列的colModel的額外屬性，大多數的時候是用來在提交到服務器之前驗證用戶的輸入合法性的 { required: true } ：required 必填項 {edithidden:true}：只在Form Editing模式下有效，設置為true，就可以讓隱藏字段也可以修改。 {number}：設置為true，如果輸入值不是數字或者為空，則會報錯。 integer： minValue： maxValue： email： url：檢查是不是合法的URL地址。 date： time： custom：設置為true，則會通過一個自定義的js函數來驗證。函數定義在custom_func中。 custom_func:傳遞給函數的值一個是需要驗證value，另一個是定義在colModel中的name屬性值。函數必須返回一個數組，一個是驗證的結果，true或者false，另外一個是驗證錯誤時候的提示字符串。形如[false,”Please enter valid value”]這樣。

函數的作用是，判斷是不是合法的手機號，如果是，則返回true，代碼繼續運行，如果否，則提示“不是完整的11位手機號或者正確的手機號格式”，jqgrid繼續停留在編輯頁面。

name : 'mobile',

index : 'mobile',

editable: true,

editrules : {required : true},

editrules:{

required : false,

custom:true,

custom_func:function(value, colNames){

if(!(/^(1[3-9])\d{9}$/.test(value))){

return [false, "不是完整的11位手機號或者正確的手機號格式"];

}else{

return [true,""];

}

}

formatoptions formatoptions : { value: this.getStatus } 設置下拉框里的值

列表顯示工具按鈕

列表必須設置caption屬性才會顯示根據菜單按鈕

// 初始化

mounted: function () {

var table = this.$refs["modelDesignDataBaseList"].smartTable();

table.barButtonAddExt([{

name: "編輯單元格",

icon: "fa fa-edit",

clickFun: this.editCell,

privilegeUrl: "/test/111"

}, {

name: "保存單元格",

icon: "fa fa-edit",

clickFun: this.saveEditCell

}, {

name: "彈出對話框",

icon: "fa fa-copy",

clickFun: this.openModal

}, {

name: "提交",

icon: "fa fa-commenting",

clickFun: this.submitData

}

]);

},

常用方法

獲取表格數據

//獲取選中的多行數據

var selRowsw1 = table.getGridParam("selarrrow");

//獲取選中一行的數據

var selRows = table.getGridParam("selrow");

var table = this.$refs["modelDesignDataBaseList"].smartTable();

//獲取選中的多行數據

var selRowsw1 = table.getGridParam("selarrrow");

//獲取選中一行的數據

var selRows2 = table.getGridParam("selrow");

//獲取查詢得到的總記錄數量

var selRows3 = table.getGridParam("records");

//獲取顯示配置分頁記錄總數數量

var selRows4 = table.getGridParam("rowNum");

// 獲取所有行數據(包括選中和未選中)

var rowAll=table.getDataIDs();

獲取單元格中的值

var val=table.getCell(rowId, "hellop3");

為一行設置數據

table.setEditRow(selRows, { "notifNo": "1111", "notifTitle": "222", "notifState": "2" });

為一行上的單元格設置數據

table.setEditCell(selRows, "notifNo", "300");

[jqGrid 操作一些總結]

. 手動往grid中添加數據

$("#orgGridId").jqGrid('addRowData',mydata[i].id,mydata[i]);

mydata[i].id:添加這列的主鍵id

mydata[i]：json格式的數據，

例{id:"e",name:"2007-09- ? ? ?01",phone:"test3",parseMobile:"note3",orgName:"400.00"}

2. 更新數據

$("#orgGrid").jqGrid('setRowData',mydata[i].id,{name:"2008-10- ? ? ? ? ? ????????????01",phone:"test",parseMobile:"note",orgName:"200.00"});

mydata[i].id:需要修改列的主鍵id

3. 刪除數據

$("#orgGrid").jqGrid('delRowData',id);

id:列主鍵

4. 根據id拿該列的所有Data

$("#orgGrid").jqGrid('getRowData',id));

id:列主鍵，如果拿不到返回{},拿到了返回一個Object

5. 拿到grid中的所有主鍵

$("#gridTable_subgrid").getDataIDs();

6. 拿到grid中所有的數據

$("#orgGrid").getRowData();

返回一個數組，可以根據自己的需要，提取需要的字段。

7. 拿到grid中所有選擇的數據

$(subGridId).jqGrid('getGridParam','selarrrow');

8. 清空整個grid

$("#orgGrid").jqGrid('clearGridData');

9. 有選擇的刪除grid

for(var i=0; i < grLength; i++){

//gr[0]是因為如果刪除gr中的一個，gr的數量就好自動減少,所以循環要刪除的數量，每次都刪除第一個

$("#orgGrid").jqGrid('delRowData',gr[0]);

}

10. 如果你需要在colModel新加一列，這一列的值是其他幾列值的拼接或者加減什么的

{name : 'allAmt', index : 'allAmt', width: '100px', search:false, sortable:false, align:'center'

// ,formatter : function(value, options, rData){

// return rData['emsAmt']+rData['paySendAmt'];

// }

}

注：可以把注釋掉的代碼加上去，這樣該列就有值了，“emsAmt”和“paySendAmt”都是其他列的數據，包括你想對某列的數據進行處理之后再顯示

11. 給grid添加查詢參數

$("#overrangeResultGrid").jqGrid().setPostDataItem("startTime", $("#startTime").val());

12. 重新加載grid

$("#orgGrid").trigger("reloadGrid");

13. formater的使用可以參考

注意事項

jqgrid 表格中的復選框的默認值是Yes|No ，editoptions數據可以設置自定義選項值。

editoptions: {value:"true:false"}

多選框賦值方式

總結

以上是生活随笔為你收集整理的android 编辑自定义可编辑表格,smart 框架 列表 可编辑表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。