[英]How to do inline edit with JqGrid subgrids?
我知道如何使用主網格進行內聯編輯,但有沒有辦法為子網格執行此操作?
這是我的JS文件:
$(function(){
var lastsel;
$("#list").jqGrid({
url:'example.php',
postData:{q:1},
datatype: 'json',
mtype: 'GET',
colNames:['Anchor','Description','Email','Url','In Today','Out Today','In Total','Out Total','Credits','Ratio','Status'],
colModel :[
{name : 'anchor' , index : 'anchor', width : 55, 'editable':true, 'editoptions':{'size':30}},
{'name' : 'description' , 'index' : 'description', 'width' : 55, 'editable':true, 'edittype':'textarea', 'editoptions':{'rows':'3','cols':'30'}},
{'name' : 'email' , 'index' : 'email', 'width' : 55, 'editable':true, 'editoptions':{'size':30}},
{'name' : 'url' , 'index' : 'url', 'width' : 55, 'editable':true, 'editoptions':{'size':30}},
{'name' : 'in_today' , 'index' : 'in_today', 'width' : 55, 'align' : 'right'},
{'name' : 'out_today' , 'index' : 'out_today', 'width' : 55, 'align' : 'right'},
{'name' : 'in_total' , 'index' : 'in_total', 'width' : 55, 'align' : 'right'},
{'name' : 'out_total' , 'index' : 'out_total', 'width' : 55, 'align' : 'right'},
{'name' : 'credits' , 'index' : 'credits', 'width' : 55, 'align' : 'right', 'editable':true, 'editoptions':{'size':30}},
{'name' : 'ratio' , 'index' : 'ratio', 'width' : 55, 'align' : 'right', 'editable':true, 'editoptions':{'size':30}},
{'name' : 'status' , 'index' : 'status', 'width' : 55,'align' : 'center', 'editable':true, 'edittype':'checkbox', 'editoptions':{'value':"On:Off"}}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'anchor',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid',
subGrid: true,
subGridUrl: 'example.php?q=2',
subGridModel: [{ name : ['Game','URL'],width : [200,300] }],
onSelectRow: function(id){
if(id && id!=lastsel){
jQuery('#list').jqGrid('restoreRow',lastsel);
jQuery('#list').jqGrid('editRow',id, true, '', '', '', {'q':3,'oper':'trades-edit'});
lastsel=id;
}
},
editurl: "example.php"
});
});
你可以使用網格子網格作為網格選項,詳見jqgrid wiki:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid_as_grid
我在當前的項目中使用過這個並且運行良好。 優點是您可以使用任何網格功能,因為子網格只是另一個網格。 所以你不需要任何subGrid樣式選項。 相反,你會有類似的東西:
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
jQuery("#"+subgrid_table_id).jqGrid({
url:"subgrid.php?q=2&id="+row_id,
datatype: "json",
colNames: ['Game','Url'],
colModel: [
{name:"game",index:"num",width:80,key:true},
{name:"url",index:"item",width:130},
],
height: 100%,
rowNum:20,
sortname: 'num',
sortorder: "asc"
});
}
});
埃德吉布斯在上面的正確軌道上。 是的,當您將網格創建為子網格時,您可以訪問常規網格上的所有選項。 在子網格中定義這兩個選項至關重要。 省略這些選項將不允許您執行內聯編輯。
subGridRowExpanded: function(subgrid_id, row_id) {
...
cellEdit: true,
cellsubmit: 'clientarray'
...
..
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.