可編輯表格常用屬性

colModel: [

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

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

editable： true|false 表示該cell是否支持可編輯，默認(rèn)為false。對(duì)hidden屬性默認(rèn)不支持編輯，當(dāng)然也可以通過(guò)其他方式來(lái)實(shí)現(xiàn) edittype：簡(jiǎn)單說(shuō)就是當(dāng)前cell在編輯狀態(tài)下是按照哪種input類型，因?yàn)樵诰庉嬒聲?huì)轉(zhuǎn)化為,于是支持的輸入類型當(dāng)然包括：'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file'還有custom，默認(rèn)為text

editoptions：一個(gè)數(shù)組用來(lái)設(shè)置edittype屬性，通過(guò)該屬性來(lái)限定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” }//對(duì)于多選的支持：editoptions: {multiple:true, size:3... }

//當(dāng)edittype為custom時(shí)需要有兩個(gè)函數(shù)，一個(gè)用來(lái)創(chuàng)建該元素(custom_element另外一個(gè)對(duì)其賦值(custom_value)，如

edittype:'custom', editoptions:{

custom_element: function(value, options){

},

custom_value:function(elem, operation, value){

}

}

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

函數(shù)的作用是，判斷是不是合法的手機(jī)號(hào)，如果是，則返回true，代碼繼續(xù)運(yùn)行，如果否，則提示“不是完整的11位手機(jī)號(hào)或者正確的手機(jī)號(hào)格式”，jqgrid繼續(xù)停留在編輯頁(yè)面。

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位手機(jī)號(hào)或者正確的手機(jī)號(hào)格式"];

}else{

return [true,""];

}

}

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

列表顯示工具按鈕

列表必須設(shè)置caption屬性才會(huì)顯示根據(jù)菜單按鈕

// 初始化

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: "彈出對(duì)話框",

icon: "fa fa-copy",

clickFun: this.openModal

}, {

name: "提交",

icon: "fa fa-commenting",

clickFun: this.submitData

}

]);

},

常用方法

獲取表格數(shù)據(jù)

//獲取選中的多行數(shù)據(jù)

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

//獲取選中一行的數(shù)據(jù)

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

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

//獲取選中的多行數(shù)據(jù)

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

//獲取選中一行的數(shù)據(jù)

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

//獲取查詢得到的總記錄數(shù)量

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

//獲取顯示配置分頁(yè)記錄總數(shù)數(shù)量

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

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

var rowAll=table.getDataIDs();

獲取單元格中的值

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

為一行設(shè)置數(shù)據(jù)

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

為一行上的單元格設(shè)置數(shù)據(jù)

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

[jqGrid 操作一些總結(jié)]

. 手動(dòng)往grid中添加數(shù)據(jù)

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

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

mydata[i]：json格式的數(shù)據(jù)，

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

2. 更新數(shù)據(jù)

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

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

3. 刪除數(shù)據(jù)

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

id:列主鍵

4. 根據(jù)id拿該列的所有Data

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

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

5. 拿到grid中的所有主鍵

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

6. 拿到grid中所有的數(shù)據(jù)

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

返回一個(gè)數(shù)組，可以根據(jù)自己的需要，提取需要的字段。

7. 拿到grid中所有選擇的數(shù)據(jù)

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

8. 清空整個(gè)grid

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

9. 有選擇的刪除grid

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

//gr[0]是因?yàn)槿绻麆h除gr中的一個(gè)，gr的數(shù)量就好自動(dòng)減少,所以循環(huán)要?jiǎng)h除的數(shù)量，每次都刪除第一個(gè)

$("#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”都是其他列的數(shù)據(jù)，包括你想對(duì)某列的數(shù)據(jù)進(jìn)行處理之后再顯示

11. 給grid添加查詢參數(shù)

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

12. 重新加載grid

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

13. formater的使用可以參考

注意事項(xiàng)

jqgrid 表格中的復(fù)選框的默認(rèn)值是Yes|No ，editoptions數(shù)據(jù)可以設(shè)置自定義選項(xiàng)值。

editoptions: {value:"true:false"}

多選框賦值方式

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。