$.(document).ready(function() {
$.ajax({
url: 'xx_op.php',
...success: function(result) {
result = JSON.parse(result);
var colNames = result.columnNames;
var colModel = result.colModel;
$.("list").jqGrid({
colNames: colNames,
colModel: colModel,
cellEdit: true,
cellsubmit: 'clientArray',
afterSaveCell: function(rowid, cellname, value, iRow, iCol) {
var y = $("group_list").getChangedCells('dirty');
var t = JSON.stringify(y);
$.ajax({
....
});
}
});
}
});
});
你能理解我的意思吗?我想将单元格编辑设置为下拉列表和多选,那么如何编写代码?这是我最终想要实现的效果图。 并且每个同名都像图片,值因同名而异
在此处输入图像描述
您需要
为要成为多选选项的列定义编辑类型和编辑选项。
这里也是关于多选的有用链接
这是我在jsfiddle中为您创建的解决方案
var mydata = [
{id: "10", Name: "dog", Singleselect: "1", Multiselect: [1]},
{id: "20", Name: "cat", Singleselect: "1", Multiselect: [2]},
{id: "30", Name: "fish", Singleselect: "2", Multiselect: [3, 4]},
{id: "40", Name: "elephant", Singleselect: "2", Multiselect: [4]}
],
lastSel;
$("#list").jqGrid({
data: mydata,
cellEdit:true,
datatype: "local",
cellsubmit: 'clientArray',
colModel: [
{ name: "Name", width: 130 },
{ name: "Singleselect", width: 100, formatter: "select", edittype: "select",
editoptions: {
value: {"1": "sport", "2": "science"},
size: 2
}
},
{ name: "Multiselect", width: 250,
formatter: "select",
edittype: "custom",
editoptions: {
value: {"1": "Swim", "2": "Eat 1", "3": "drink", "4": "bark"},
custom_element: function (value, options) {
return $.jgrid.createEl.call(this, "select",
$.extend(true, {}, options, {custom_element: null, custom_value: null}),
value);
},
custom_value: function ($elem, operation, value) {
if (operation === "get") {
return $elem.val();
}
},
multiple: true
}
}
],
cmTemplate: { editable: true },
gridview: true,
sortname: "Name",
sortorder: "desc",
viewrecords: true,
rownumbers: true,
pager: "#pager",
height: "100%",
editurl: "clientArray",
caption: "Multi select options"
});
在你的PHP中添加它,无论你在哪里创建列模型SEe 也是解决方案在这里,奥列格创造了与您的相似的
内容 editoptions:
{
'custom_element': multiselectcallback,
'custom_value': multiselectvalue,
multiple: true
}
然后把它们放到javascript中
function multiselectcallback(value, options) {
//get dropdown values using ajax and load them on success
$.get( "xx_op.php/getdropdownlistdata", function(result) {
return $.jgrid.createEl.call(this, "select", $.extend(true, {}, options, {custom_element: null, custom_value: null}), result);
}
函数多选值(elem, op, v( {
if (operation === "get")
{
return $elem.val();
}