Jqgrid 如何基于同一行上不同单元格中的数据禁用单元格中的内联编辑
我想根据在不同单元格中找到的数据启用/禁用单元格的内联编辑 我正在使用格式化程序操作来显示编辑图标,这似乎意味着我无法通过OnSetrow进行任何检查,因为当单击编辑图标时,这似乎不会被触发。在阅读了一些不同的问题/解决方案后,我想我可以简单地禁用/启用对整个专栏的编辑,但这在我下面的代码中似乎不起作用,而且我认为这将是一个不好的选择,因为看起来用户可以在同一显示图标内的多行上单击编辑图标,并且每一行都将显示出来同时可编辑。似乎最好的方法是在单元格级别本身启用/禁用编辑,但我已经通过afterInsertRow和操作中的OneEdit尝试过,但这两种方法似乎都对单元格是否可以编辑没有任何影响 这是使用JQGrid 4.5.2、jQueryUI1.9.1和jQuery1.8.2实现的Jqgrid 如何基于同一行上不同单元格中的数据禁用单元格中的内联编辑,jqgrid,Jqgrid,我想根据在不同单元格中找到的数据启用/禁用单元格的内联编辑 我正在使用格式化程序操作来显示编辑图标,这似乎意味着我无法通过OnSetrow进行任何检查,因为当单击编辑图标时,这似乎不会被触发。在阅读了一些不同的问题/解决方案后,我想我可以简单地禁用/启用对整个专栏的编辑,但这在我下面的代码中似乎不起作用,而且我认为这将是一个不好的选择,因为看起来用户可以在同一显示图标内的多行上单击编辑图标,并且每一行都将显示出来同时可编辑。似乎最好的方法是在单元格级别本身启用/禁用编辑,但我已经通过afterI
<script>
$(document).ready(function() {
var noteIcon = '<div title="Job Details" style="float:left; margin-left:5px;" class="ui-pg-div ui-inline-edit" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"><span class="ui-icon ui-icon-note"></span></div>';
getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
jQuery.extend(jQuery.jgrid.defaults, {
altRows:true,
altclass:'myAltRowClass',
datatype: "json",
jsonReader: {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
records: "RECORDS",
cell: "",
id: "0"
},
emptyrecords: "No jobs to display.",
rowList: [25,50,100],
viewrecords: true,
height: "auto",
loadonce: true,
footerrow: true,
loadComplete: function (data) {
var $self = $(this), i = getColumnIndexByName($self, 'action');
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > div:nth-child(1)",$self[0]).click(function(e) {
var tr=$(e.target,$self[0].rows).closest("tr.jqgrow");
e.preventDefault();
window.location.href = 'CenterView.cfm?table=ORDER_JOBS&ID=' + tr[0].id + '&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15';
});
},
colNames: [ "ID", "Delivery Type", "Service Type", "Pre-Commit", "Survey Name", "Client", "Order ID", "Job Number", "Client Reference","Internal Reference", "Type", "Product Name", "Submitted For", "Sales Coordinator", "Order Date", "Requested Date", "Standard Date", "Inbox Date", "Delivery Hold", "Pre-Commit Hold", "Analyst", " ", "Actions" ],
colModel: [
{ name: "id", index: "id", hidden: true, key: true },
{ name: "delivery_type", index: "delivery_type", width: 70, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;External Delivery:External Delivery;Internal Data Access:Internal Data Access;Internal Delivery:Internal Delivery" } },
{ name: "service_type", index: "service_type", width: 65, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "isprecommit", index: "isprecommit", width: 50, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;false:No;true:Yes" } },
{ name: "survey_name", index: "survey_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxSurvey&PICK_DMS_CENTERID=15'} },
{ name: "corpname", index: "corpname", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxClient&PICK_DMS_CENTERID=15'} },
{ name: "orderid", index: "orderid", width: 40, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxOrder&PICK_DMS_CENTERID=15'}, search:false },
{ name: "jobsnumber", index: "jobsnumber", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'CenterView.cfm', addParam: '&table=ORDER_JOBS&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15'} },
{ name: "clientref", index: "clientref", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "internal_reference", index: "internal_reference", width: 33, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":;EOM:EOM;NO GO:NO GO" } },
{ name: "survey_type", index: "survey_type", width: 35, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;2D:2D;3D:3D" } },
{ name: "product_name", index: "product_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "submitted_for", index: "submitted_for", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "sales_coordinator", index: "sales_coordinator", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "order_date", index: "order_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "requested_date", index: "requested_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "dt_standard", index: "dt_standard", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "inbox_date", index: "inbox_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "isdeliveryhold", index: "isdeliveryhold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } },
{ name: "isprecommithold", index: "isprecommithold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } },
{ name: "analyst", index: "analyst", width: 115, align: "center", sortable: true, search: true, formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;michael-19810202:Mike Hares;sara-20061004:Sara Kathleen Lampman" } },
{ name: 'action', index: 'action', sortable: false, search: false, width: 25, formatter: function() { return noteIcon; } },
{ name: "act", index: "act", width: 55, align: "center", sortable: false, search:false, formatter: "actions",
formatoptions: {
keys: true, delbutton: false, afterSave: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); },
onEdit:function(rowid) {
var localRowData = $(this).jqGrid('getLocalRow', rowid);
if(localRowData.isprecommit == true) {
// $(this).jqGrid('setColProp', 'isprecommithold', {editable:true});
}
else {
// $(this).jqGrid('setColProp', 'isprecommithold', {editable:false});
$(this).setCell(rowid,"isprecommithold","",'not-editable-cell');
}
}
}
}
],
editurl: "Components/JobsInbox.cfc?method=SetJobUpdate&UPDATEDBY=aaron-20040630",
afterInsertRow:
function(rowid, aData){
/*
if(aData.isprecommit == false) {
$(this).setCell(rowid,"isprecommithold","",'not-editable-cell');
}
*/
if(aData.isdeliveryhold) {
$(this).setCell(rowid,"isdeliveryhold","",{"background":"#FF6A6A"});
}
}
});
$('#Jobs').jqGrid({
url: "Components/JobsInbox.cfc?method=GetJobGrid&PICK_DMS_CENTERID=15&CFDateFormat=MM/DD/YY",
caption: "Jobs Inbox",
pager: $('#JobsPager')
});
$('#Jobs').jqGrid('filterToolbar', { searchOperators: false, ignoreCase: true });
$('#Jobs').jqGrid('navGrid', '#JobsPager', { add: false, edit: false, del: false, refresh: false });
$('#Jobs').jqGrid('navButtonAdd', '#JobsPager', { caption: "", buttonicon: "ui-icon-refresh", title: $.jgrid.nav.refreshtitle, onClickButton: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); } });
});
</script>
<style type="text/css">
.myAltRowClass { background-color: #ECF6FC; background-image: none; }
/* Wrap in header cell */
.ui-jqgrid .ui-jqgrid-htable th div {
height:auto;
overflow:hidden;
padding-right:4px;
padding-top:2px;
position:relative;
vertical-align:text-top;
white-space:normal !important;
}
/* Wrap in table cell */
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
span.cellWithoutBackground {
display:block;
background-image:none;
margin-right:-2px;
margin-left:-2px;
height:14px;
padding:4px;
}
</style>
$(文档).ready(函数(){
var noteIcon='';
getColumnIndexByName=函数(网格,columnName){
var cm=grid.jqGrid('getGridParam','colModel');
对于(var i=0,l=cm.length;i我通过下面这个问题找到了这个问题的基本答案
以下是工作代码:
<script>
$(document).ready(function() {
var noteIcon = '<div title="Job Details" style="float:left; margin-left:5px;" class="ui-pg-div ui-inline-edit" onmouseover="jQuery(this).addClass(\'ui-state-hover\');" onmouseout="jQuery(this).removeClass(\'ui-state-hover\');"><span class="ui-icon ui-icon-note"></span></div>';
getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
};
DoDeliveryHolds = function(grid) {
var aryIDS = $(grid).jqGrid('getDataIDs');
if(aryIDS.length > 0) {
// Add Ajax call to do toggle in database
alert(aryIDS.length);
}
};
// Here we set the altRows option globallly
jQuery.extend(jQuery.jgrid.defaults, {
altRows:true,
altclass:'myAltRowClass',
datatype: "json",
jsonReader: {
root: "ROWS",
page: "PAGE",
total: "TOTAL",
records: "RECORDS",
cell: "",
id: "0"
},
emptyrecords: "No jobs to display.",
rowList: [25,50,100],
viewrecords: true,
height: "auto",
loadonce: true,
footerrow: true,
loadComplete: function (data) {
var $self = $(this), i = getColumnIndexByName($self, 'action');
// nth-child need 1-based index so we use (i+1) below
$("tbody > tr.jqgrow > td:nth-child("+(i+1)+") > div:nth-child(1)",$self[0]).click(function(e) {
var tr=$(e.target,$self[0].rows).closest("tr.jqgrow");
e.preventDefault();
window.location.href = 'CenterView.cfm?table=ORDER_JOBS&ID=' + tr[0].id + '&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15';
});
},
colNames: [ "ID", "Delivery Type", "Service Type", "Pre-Commit", "Survey Name", "Client", "Order ID", "Job Number", "Client Reference","Internal Reference", "Type", "Product Name", "Submitted For", "Sales Coordinator", "Order Date", "Requested Date", "Standard Date", "Inbox Date", "Delivery Hold", "Pre-Commit Hold", "Analyst", " ", "Actions" ],
colModel: [
{ name: "id", index: "id", hidden: true, key: true },
{ name: "delivery_type", index: "delivery_type", width: 70, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;External Delivery:External Delivery;Internal Data Access:Internal Data Access;Internal Delivery:Internal Delivery" } },
{ name: "service_type", index: "service_type", width: 65, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "isprecommit", index: "isprecommit", width: 50, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;false:No;true:Yes" } },
{ name: "survey_name", index: "survey_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxSurvey&PICK_DMS_CENTERID=15'} },
{ name: "corpname", index: "corpname", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxClient&PICK_DMS_CENTERID=15'} },
{ name: "orderid", index: "orderid", width: 40, formatter:'showlink', formatoptions:{baseLinkUrl:'LinkStation.cfm', addParam: '&Type=JobsInboxOrder&PICK_DMS_CENTERID=15'}, search:false },
{ name: "jobsnumber", index: "jobsnumber", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']}, formatter:'showlink', formatoptions:{baseLinkUrl:'CenterView.cfm', addParam: '&table=ORDER_JOBS&backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15'} },
{ name: "clientref", index: "clientref", width: 60, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "internal_reference", index: "internal_reference", width: 33, formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":;EOM:EOM;NO GO:NO GO" } },
{ name: "survey_type", index: "survey_type", width: 35, align: "center", formatter:'select', stype:'select', edittype:'select', editoptions: { value: ":All;2D:2D;3D:3D" } },
{ name: "product_name", index: "product_name", searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "submitted_for", index: "submitted_for", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "sales_coordinator", index: "sales_coordinator", width: 70, searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']} },
{ name: "order_date", index: "order_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "requested_date", index: "requested_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "dt_standard", index: "dt_standard", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "inbox_date", index: "inbox_date", width: 50, align: "center", search:false, datefmt: 'mm/dd/yy' },
{ name: "isdeliveryhold", index: "isdeliveryhold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } },
{ name: "isprecommithold", index: "isprecommithold", sortable: true, search: true, width: 50, align: "center", formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;false:No;true:Yes" } },
{ name: "analyst", index: "analyst", width: 115, align: "center", sortable: true, search: true, formatter:'select', stype:'select', editable:true, edittype:'select', editoptions: { value: ":;michael-19810202:Mike Hares;sara-20061004:Sara Kathleen Lampman" } },
{ name: 'action', index: 'action', sortable: false, search: false, width: 25, formatter: function() { return noteIcon; } },
{ name: "act", index: "act", width: 55, align: "center", sortable: false, search:false, formatter: "actions",
formatoptions: {
keys: true, delbutton: false, afterSave: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); }
}
}
],
editurl: "Components/JobsInbox.cfc?method=SetJobUpdate&UPDATEDBY=aaron-20040630",
afterInsertRow:
function(rowid, aData){
if(aData.isdeliveryhold) {
$(this).setCell(rowid,"isdeliveryhold","",{"background":"#FF6A6A"});
}
}
});
$('#Jobs').jqGrid({
url: "Components/JobsInbox.cfc?method=GetJobGrid&PICK_DMS_CENTERID=15&CFDateFormat=MM/DD/YY",
caption: "Jobs Inbox",
pager: $('#JobsPager')
});
$('#Jobs').jqGrid('filterToolbar', { searchOperators: false, ignoreCase: true });
$('#Jobs').jqGrid('navGrid', '#JobsPager', { add: false, edit: false, del: false, refresh: false });
$('#Jobs').jqGrid('navButtonAdd', '#JobsPager', { caption: "", buttonicon: "ui-icon-refresh", title: $.jgrid.nav.refreshtitle, onClickButton: function() { $(this).jqGrid('setGridParam', {datatype:'json'}); $(this).trigger('reloadGrid', [{page:1}]); } });
$('#Jobs').jqGrid('navButtonAdd', '#JobsPager', { caption: "Toggle Delivery Holds", buttonicon: "ui-icon-pencil", onClickButton: function() { var str = confirm("Toggle the Delivery Hold for all displayed Jobs?"); if(str) { DoDeliveryHolds($(this)); } } });
var orgRowActions = $.fn.fmatter.rowactions;
$.fn.fmatter.rowactions = function (act) {
var $tr = $(this).closest("tr.jqgrow"),
rid = $tr.attr("id"),
$grid = $(this).closest("table.ui-jqgrid-btable"),
rowData = $grid.jqGrid("getLocalRow", rid),
isNonEditable = false,
result;
// editable property of any column
if (act === "edit" && rowData.isprecommit == false) {
$grid.jqGrid("setColProp", "isprecommithold", {editable: false});
isNonEditable = true;
}
result = orgRowActions.call(this, act);
if (isNonEditable) {
// reset the setting to original state
$grid.jqGrid("setColProp", "isprecommithold", {editable: true});
}
return result;
}
});
</script>
<style type="text/css">
.myAltRowClass { background-color: #ECF6FC; background-image: none; }
/* Wrap in header cell */
.ui-jqgrid .ui-jqgrid-htable th div {
height:auto;
overflow:hidden;
padding-right:4px;
padding-top:2px;
position:relative;
vertical-align:text-top;
white-space:normal !important;
}
/* Wrap in table cell */
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
span.cellWithoutBackground {
display:block;
background-image:none;
margin-right:-2px;
margin-left:-2px;
height:14px;
padding:4px;
}
</style>
$(文档).ready(函数(){
var noteIcon='';
getColumnIndexByName=函数(网格,columnName){
var cm=grid.jqGrid('getGridParam','colModel');
对于(变量i=0,l=cm.length;i 0){
//在数据库中添加Ajax调用以进行切换
警报(aryIDS.length);
}
};
//这里我们全局设置altRows选项
extend(jQuery.jgrid.defaults,{
阿尔特罗斯:是的,
altclass:'myAltRowClass',
数据类型:“json”,
jsonReader:{
根:“行”,
第页:“第页”,
总计:“总计”,
记录:“记录”,
单元格:“”,
id:“0”
},
emptyrecords:“没有要显示的作业。”,
行列表:[25,50100],
viewrecords:是的,
高度:“自动”,
有一次:是的,
是的,
loadComplete:函数(数据){
var$self=$(this),i=getColumnIndexByName($self,'action');
//第n个孩子需要基于1的索引,所以我们使用下面的(i+1)
$($tbody>tr.jqgrow>td:n子项(“+(i+1)+”)>div:n子项(1)”,$self[0])。单击(函数(e){
var tr=$(e.target,$self[0]。行)。最近的(“tr.jqgrow”);
e、 预防默认值();
window.location.href='CenterView.cfm?table=ORDER_JOBS&ID='+tr[0].ID+'和backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15';
});
},
ColName:[“ID”、“交付类型”、“服务类型”、“预提交”、“调查名称”、“客户”、“订单ID”、“工作编号”、“客户参考”、“内部参考”、“类型”、“产品名称”、“提交对象”、“销售协调员”、“订单日期”、“请求日期”、“标准日期”、“收件箱日期”、“交付保留”、“预提交保留”、“分析师”、“操作”],
colModel:[
{name:“id”,index:“id”,hidden:true,key:true},
{name:“delivery_type”,index:“delivery_type”,宽度:70,格式化程序:'select',stype:'select',edittype:'select',editoptions:{value:'All;外部传递:外部传递;内部数据访问:内部数据访问;内部传递:内部传递},
{名称:“服务类型”,索引:“服务类型”,宽度:65,搜索选项:{sopt:['cn'、'eq'、'bw'、'bn'、'nc'、'ew'、'en']},
{name:“isprecommit”,index:“isprecommit”,width:50,align:“center”,格式化程序:'select',stype:'select',edittype:'select',editoptions:{value:'All;false:No;true:Yes},
{name:'survey_name',index:'survey_name',searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']},格式化程序:'showlink',格式化选项:{baseLinkUrl:'LinkStation.cfm',addParam:'&Type=JobsInboxSurvey&PICK\DMS_CENTERID=15'},
{name:'corpname',index:'corpname',searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']},格式化程序:'showlink',格式化选项:{baseLinkUrl:'LinkStation.cfm',addParam:'&Type=JobsInboxClient&PICK\DMS\u CENTERID=15'},
{name:“orderid”,index:“orderid”,width:40,格式化程序:'showlink',格式化选项:{baseLinkUrl:'LinkStation.cfm',addParam:'&Type=JobsInboxOrder&pickdms_CENTERID=15'},搜索:false},
{name:'jobsnumber',index:'jobsnumber',width:60,searchoptions:{sopt:['cn','eq','bw','bn','nc','ew','en']},格式化程序:'showlink',格式化选项:{baseLinkUrl:'CenterView.cfm',addParam:'&table=ORDER\u作业和backurl=%3DJobsInbox%2Ecfm%3FPICK%5FDMS%5FCENTERID%3D15},
{名称:“clientref”,索引:“clientref”,宽度:60,搜索选项:{sopt:['cn','eq','bw','bn','nc','ew','en']},
{name:“internal_reference”,index:“internal_reference”,width:33,格式化程序:'select',stype:'select',edittype:'select',editoptions:{value::;EOM:EOM;NO GO:NO GO},
{name:“survey_type”,index:“survey_type”,width:35,align:“center”,formatter:“select”,stype:“select”,edittype:“select”,editoptions:{value::All;2D:2D;3D:3D”},
{名称:“产品名称”,索引:“产品名称”,搜索选项:{sopt:['cn','eq','bw','bn','nc','ew','en']},
{name:“submitted_for”,index:“submitted_for”,宽度:70,搜索选项:{sopt:['cn','eq','bw','bn','nc','ew','en']},
{名称:“销售协调人”,索引:“销售协调人”,宽度:70,搜索选项:{sopt:['cn','eq','bw','bn','nc','ew','en']},