在jqGrid中自定义“添加/编辑”对话框
Customizing the Add/Edit Dialog in jqGrid
很抱歉我不能发布图片,我太新了。
在jqGrid添加/编辑对话框中,我想根据之前的选择加载一个可选项目列表。在上图中,应根据标准选择中选择的值加载值选择。我相信应该使用editoptions对象中的dataurl,但我在这方面遇到了问题。第一个令人不安的问题是,根据这里的文档,当标准的值发生变化时,似乎没有可以触发的事件,这将允许我更新值列表。
此外,我对如何从ajax请求返回数据感到困惑。文件中写道:
设置editoptions dataUrl参数editoptions data Url参数仅对edittype为select的元素有效。dataUrl参数表示应该从中获取html select元素的url。设置此选项后,元素将填充AJAX请求中的值。数据应该是一个有效的HTML选择元素,具有所需的选项"
这是否意味着我需要生成html并将其作为响应的一部分返回?以前我一直使用json传递所有数据。
editoptions
中没有简单的依赖选择支持。因此,要实现的是必须在主选择上使用change
事件来手动更新第二个(从属)选择的选项列表。
在演示中,您将了解如何实现依赖选择。我在演示中使用了"local"数据类型,因此设置了editoptions
的value
属性,而不是dataUrl
,但应该执行的主模式保持不变。此外,在演示中,我不仅使用表单编辑,还使用内联编辑。代码在这两种情况下都有效。由于jqGrid在表单编辑模式下不支持本地编辑,因此表单的提交不起作用。我当然可以使用我在这里描述的技巧,但代码会更长,并且会包含许多与您的主要问题相去甚远的内容。所以我决定在提交不起作用的地方发布代码。
下面是演示中的代码:
var countries = { '1': 'US', '2': 'UK' },
states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' },
statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
statesOfUK = { '5': 'London', '6': 'Oxford' },
// the next maps contries by ids to states
statesOfCountry = { '1': statesOfUS, '2': statesOfUK },
mydata = [
{ id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
{ id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
{ id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
{ id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
],
lastSel = -1,
grid = $("#list"),
resetStatesValues = function () {
// set 'value' property of the editoptions to initial state
grid.jqGrid('setColProp', 'State', { editoptions: { value: states} });
};
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name: 'Name', width: 200 },
{
name: 'Country',
width: 100,
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: {
value: countries,
dataInit: function (elem) {
var v = $(elem).val();
// to have short list of options which corresponds to the country
// from the row we have to change temporary the column property
grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} });
},
dataEvents: [
{
type: 'change',
fn: function (e) {
// build 'State' options based on the selected 'Country' value
var v = $(e.target).val(),
sc = statesOfCountry[v],
newOptions = '',
stateId,
form,
row;
for (stateId in sc) {
if (sc.hasOwnProperty(stateId)) {
newOptions += '<option role="option" value="' + stateId + '">' +
states[stateId] + '</option>';
}
}
resetStatesValues();
// populate the subset of contries
if ($(e.target).is('.FormElement')) {
// form editing
form = $(e.target).closest('form.FormGrid');
$("select#State.FormElement", form[0]).html(newOptions);
} else {
// inline editing
row = $(e.target).closest('tr.jqgrow');
$("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions);
}
}
}
]
}
},
{
name: 'State',
width: 100,
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: { value: states }
}
],
onSelectRow: function (id) {
if (id && id !== lastSel) {
if (lastSel !== -1) {
resetStatesValues();
grid.jqGrid('restoreRow', lastSel);
}
lastSel = id;
}
},
ondblClickRow: function (id) {
if (id && id !== lastSel) {
grid.jqGrid('restoreRow', lastSel);
lastSel = id;
}
resetStatesValues();
grid.jqGrid('editRow', id, true, null, null, 'clientArray', null,
function () { // aftersavefunc
resetStatesValues();
});
return;
},
editurl: 'clientArray',
sortname: 'Name',
ignoreCase: true,
height: '100%',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true },
{ // edit options
recreateForm: true,
viewPagerButtons: false,
onClose: function () {
resetStatesValues();
}
},
{ // add options
recreateForm: true,
viewPagerButtons: false,
onClose: function () {
resetStatesValues();
}
});
更新:有关演示的最新版本,请参阅答案的"更新2"部分。
相关文章:
- 如何从自定义对话框编辑数据网格中的选定行
- 使用模态对话框(JQuery)编辑函数
- 动手错误:在 jquery UI 中启动时,对话框是不可编辑的
- 在jqGrid编辑对话框中使用ptTimeSelect时出现问题
- TinyMCE编辑器在弹出对话框中失去了输入框的焦点
- 提交编辑时,值从对话框变为空
- 在 jQuery UI 对话框中加载和编辑数据
- 使用数据表行信息更新文本输入,并从对话框中编辑行
- 弗罗阿拉编辑器 - 自定义对话框
- 如何打开可编辑的对话框以发布推文
- AngularJS“连接后端”应用程序没有在编辑对话框上加载数据-使用最新的firebase
- 显示页面并使用弹出对话框编辑/更新页面
- Indesign Script JS:编辑文档文本框内容并返回对话框窗口
- 主干形式:如何在颜色框对话框上显示用于列表项编辑的jquery对话框
- jquery对话框中的wysiwyg编辑器不起作用
- 无法从jqgrid编辑表单中打开对话框,除非将html直接输入到对话框函数中
- dijit中的TinyMCE编辑器.对话框:链接对话框不工作
- 如何单击图像从我的对话框插入到编辑器
- 如何添加/编辑对话框表单的修改内容到调用元素
- 在jqGrid中自定义“添加/编辑”对话框