![](/img/trans.png)
[英]Datatables Editor show/hide a checkbox of a list of checkbox in edit row when another column is true/false
[英]Highlight row when the checkbox is true
有人可以幫助我,我有一個jqgrid,如果復選框為true,我想突出顯示該行,謝謝!!
這就是我想在這個項目中做出的......
function loadjqGrid(jsonGridData){
var xaxis=1300
var yaxis = $(document).height();
yaxis = yaxis-500;
getGrids();
$("#maingrid").jqGrid({
url:'models/mod.quoservicetypedetails.php?ACTION=view',
mtype: 'POST',
datatype: 'xml',
colNames:getColumnNames(jsonGridData),
colModel :[
{name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true,
edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}},
{name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true,
edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},
{name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
//If the GroupHeader is true the row background is yellow
{name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}},
{name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}},
],
viewrecords: true,
rowNum:20,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
height: yaxis,
pager : '#gridpager',
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No records to view",
loadtext: "Loading...",
pgtext : "Page {0} of {1}",
height: yaxis,
width: xaxis,
shrinkToFit: false,
multiselect: true,
editurl:'models/mod.quoservicetypedetails.php?ACTION=edit'
});
}
我怎么能這樣做? 有人能幫我嗎?
jqGrid版本4.3.2有新功能 - rowattr
回調(參見我的原始建議 ),特別針對像你這樣的案例引入。 它允許您在填充網格時突出顯示某些網格行。 為了獲得最佳性能優勢,您應該使用gridview: true
。 順便說一句, 我建議你在所有jqGrids中使用gridview: true
。
rowattr
回調的使用非常簡單:
gridview: true,
rowattr: function (rd) {
if (rd.GroupHeader === "1") { // verify that the testing is correct in your case
return {"class": "myAltRowClass"};
}
}
CSS類myAltRowClass
應該定義突出顯示的行的背景顏色。
你可以在這里找到相應的演示:
因為在你的演示中你需要突出顯示而不是選擇我沒有使用multiselect: true
的行multiselect: true
在我的演示中為multiselect: true
。 在多選的情況下multiselect: true
它以完全相同的方式工作。
在我的回答結束時,我建議您使用列模板 。 該功能將使您的代碼更短,更易讀,易於維護。 您需要做的是以下內容:
cmTemplete
中cmTemplete
列定義中的常用或最常用設置。 在你的情況下它可能是 cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}
var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
editoptions: {value: "1:0"}},
myTextareaTemplate = {edittype: "textarea",
editoptions: {size: "30", maxlength: "30"}};
colModel
使用myCheckboxTemplate
和myTextareaTemplate
,這將在你的情況下減少到以下 colModel: [
{name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
{name: 'Order1', index: 'Order1', template: myTextareaTemplate},
{name: 'Order2', index: 'Order2', template: myTextareaTemplate},
{name: 'Order3', index: 'Order3', template: myTextareaTemplate},
{name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
{name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
{name: 'Measure', index: 'Measure', template: myTextareaTemplate},
{name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
{name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
{name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
{name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
//If the GroupHeader is true the row background is yellow
{name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
{name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.