我正在创建一个包含以下字段和功能的新jqgrid:
部署ID','分支','发布名称','客户ID','主机数','评论','操作
- 我在TRUE上有多选选项。
- 我在每一行都有编辑/删除操作
- 我的导航栏位于底部,带有ADD /搜索选项。
我的行动是: 当我添加新记录时,我可以添加BRANCH字段和仅评论(这是工作) 当我编辑记录时,我只能修改COMMENT(也可以)
我的问题是关于MULTISELECT选项......
如果我点击编辑按钮并取消选中MULTISELECT一切正常..意味着只允许修改COMMENT。
但
如果在Multiselect列中选择了行,则BRANCH字段变为可编辑。
另外我想在编辑一个特别行时阻止其他操作(意味着无法检查/取消选中编辑/删除其他行)
有人可以帮我这么做吗?
感谢
ps:我尝试使用我在这里找到的不同代码/示例但没有成功。我现在不发布它以避免更多的混淆。
var lastSel;
$(function(){
$("#list").jqGrid({
data: mydata,
datatype: "local",
colNames:['Deployment id','Branch', 'Release Name','Client id','# of hosts','Comments','Actions'],
colModel:[
{name:'deployment_id',index:'deployment_id',align:"right", sorttype:"int", width:120},
{name:'branch',index:'branch',align:"center", formatter:branchColor,editable: true,edittype:"select",editrules:{required:true},editoptions:{value:"option 1:option1;option2:option2"}},
{name:'release_name',index:'release_name',align:"center"},
{name:'client_id',index:'client_id',align:"right", sorttype:"int", width:60},
{name:'num_hosts',index:'num_hosts',align:"right", sorttype:"int", width:60},
{name:'comments',index:'comments',align:"center", editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}},
{name:'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}}
],
rowList : [20,30,50],
pager: '#pager',
sortname: 'deployment_id',
viewrecords: true,
recordpos: 'right',
sortorder: "asc",
sortable: true,
multiselect: true,
shrinkToFit :true,
viewrecords: true,
onSelectRow: function(id){
//alert("id:"+id);
if (id == null) {
id = 0;
if(id && id!==lastSel){
//$('#list').jqGrid('restoreRow',lastSel);
//$('#list').jqGrid('editRow',id,false);
$("#jqg_list_" + id).attr("disabled","disabled");
lastSel=id;
}
}
else {
var grId = $("#list").jqGrid('getGridParam','selrow');
if(grId){
$("#" + grId + "_branch").attr("disabled","disabled");
$("#" + grId + "_branch").removeClass("editable");
}
}
},
});
// to modify The tool bar on bottom
$("#list").jqGrid('navGrid','#pager',{edit:false, edittitle: 'Modify a Deployment',
add:true, addtitle: 'Add a new Deployment',
del:true, deltitle: 'Delete a Deployment',
nav:{ addCaption: 'Columns'}
},
{// edit option
beforeShowForm: function(form) {
$('#branch', form).attr("disabled","disabled");
},
//seems to be is not qworking
beforeSelectRow: function(rowid, e) { return false; },
},
{// add option
beforeShowForm: function(form) {
$('#branch option[value=""]', form).text('Select a branch')
$('#branch option[value=""]', form).attr("selected", "selected");
$('#branch', form).attr("disabled","");
var ids;
ids = $("#list").getGridParam('selarrrow');
if(ids){
alert('array: ['+ids+']');
alert('id in array[0]: '+ids[0]);
}
},
addCaption: "Add a Deploymet"
},
{// delette option
},
{// Search option
multipleSearch:true
},
{// view option
}
);
答案 0 :(得分:0)
最后我得到了很多测试的答案..我想分享一下......对其他人来说可能有用。 基本上我删除了OnSelectRow函数,我修改了formatoptions:{}添加标签onEdit
我添加了在此链接中运行的示例/ DEMO:DEMO ONLINE
var mydata = [
{
"branch": "PACS-3-3-1",
"comments": "migrated deployment",
"client_id": 27,
"deployment_id": 249,
"release_name": null,
"num_hosts": 12},
{
"branch": "PACS-3-1-1",
"comments": "migrated deployment",
"client_id": 27,
"deployment_id": 144,
"release_name": null,
"num_hosts": 9},
{
"branch": "PACS-2-4-1",
"comments": "2.6.1",
"client_id": 27,
"deployment_id": 78,
"release_name": null,
"num_hosts": 0},
{
"branch": "PACS-2-4-2",
"comments": "PACS-2-4-2",
"client_id": 27,
"deployment_id": 46,
"release_name": null,
"num_hosts": 0}
];
var lastSel;
$("#list").jqGrid({
data: mydata,
datatype: "local",
colNames: ['Deployment id', 'Branch', 'Release Name', 'Client id', '# of hosts', 'Comments', 'Actions'],
colModel: [
{
name: 'deployment_id',
index: 'deployment_id',
align: "right",
sorttype: "int",
width: 120},
{
name: 'branch',
index: 'branch',
align: "center",
editable: true,
edittype: "select",
editrules: {
required: true
},
editoptions: {
value: "option 1:option1;option2:option2"
}},
{
name: 'release_name',
index: 'release_name',
align: "center"},
{
name: 'client_id',
index: 'client_id',
align: "right",
sorttype: "int",
width: 60},
{
name: 'num_hosts',
index: 'num_hosts',
align: "right",
sorttype: "int",
width: 60},
{
name: 'comments',
index: 'comments',
align: "center",
editable: true,
edittype: "textarea",
editoptions: {
rows: "2",
cols: "20"
}},
{
name: 'myac',
width: 80,
fixed: true,
sortable: false,
resize: false,
formatter: 'actions',
formatoptions: {
keys: true,
//hace que se abra el popup, en lugar de inlineedit
//editformbutton: true,
onEdit: function(rowid) {
//alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
$("#" + rowid + "_branch").attr("disabled", "disabled");
$("#" + rowid + "_branch").removeClass("editable");
}
}}
],
rowList: [20, 30, 50],
pager: '#pager',
sortname: 'deployment_id',
viewrecords: true,
recordpos: 'right',
sortorder: "asc",
sortable: true,
multiselect: true,
shrinkToFit: true,
// onSelectRow: function(id) {
//alert("id:"+id);
// if (id === null) {
// id = 0;
// if (id && id !== lastSel) {
//$('#list').jqGrid('restoreRow',lastSel);
//$('#list').jqGrid('editRow',id,false);
// $("#jqg_list_" + id).attr("disabled", "disabled");
// lastSel = id;
// }
// }
// else {
// var grId = $("#list").jqGrid('getGridParam', 'selrow');
// if (grId) {
// $("#" + grId + "_branch").attr("disabled", "disabled");
// $("#" + grId + "_branch").removeClass("editable");
// }
//}
// }
});
// to modify The tool bar on bottom
$("#list").jqGrid('navGrid', '#pager', {
edit: false,
edittitle: 'Modify a Deployment',
add: true,
addtitle: 'Add a new Deployment',
del: true,
deltitle: 'Delete a Deployment',
nav: {
addCaption: 'Columns'
}
}, { // edit option
// beforeShowForm: function(form) {
// $('#branch', form).attr("disabled", "disabled");
// },
//seems to be is not qworking
beforeSelectRow: function(rowid, e) {
return false;
}
},
{ // add option
beforeShowForm: function(form) {
$('#branch', form).prepend("<option value=''>Select a branch</option>")
//$('#branch option[value=""]', form).text('Select a branch');
$('#branch option[value=""]', form).attr("selected", "selected");
//$('#branch', form).attr("disabled", "");
var ids;
ids = $("#list").getGridParam('selarrrow');
if (ids) {
//alert('array: [' + ids + ']');
//alert('id in array[0]: ' + ids[0]);
}
},
addCaption: "Add a Deploymet"
},
{ // delette option
}, { // Search option
multipleSearch: true
}, { // view option
});