【发布时间】：2012-11-11 13:33:16
【问题描述】：
在 Oleg 和许多网站的帮助下，我一直致力于让级联数据绑定下拉菜单在 jqGrid 中发挥作用
我有三个下拉菜单：客户 > 项目 > 任务。更改客户应使用该客户项目重新加载项目。更改项目应使用该项目任务重新加载任务。
实际上，我已经通过在 Customer 中创建一个更改事件处理程序来让 Project 重新加载该 Customer 任务，该事件处理程序依次针对 URL 调用 getJson，然后用新选项替换 Project 下拉列表的内容。效果很好。
然后我将同样的逻辑应用到项目下拉列表中，但项目事件没有似乎触发了。在更改项目下拉列表时，我观察到以下情况：
- 任务下拉菜单没有改变
- Task Json 控制器事件没有被调用（它的意思是在项目更改事件中被
getJSON调用） - 在 Firebug 的网络监视器中，不显示对 Task Json 控制器事件的调用和响应。
- 在 Firebug 中，它没有遇到我在项目更改事件处理程序中设置的断点
但是，Customer 事件处理程序运行良好，并且在我更改 Customer 时按预期执行上述所有 4 点。
我相当确定它不会针对项目下拉菜单触发更改事件。
如果我运行网页并编辑和更改项目下拉值作为我的第一个操作，它不会触发项目事件处理程序，因此我不认为这是重置项目事件处理程序的客户事件。
那么，有谁知道为什么我的客户更改事件被调用，但我的项目没有被调用？
有没有一种方法可以检查 DOM 或其他东西并查看我的事件是否已在运行时附加？是这样的吗？
我正在使用 jqGrid 4.4.1
我的 jqGrid 是这样设置的：
- 使用内联编辑
- 点击选择 dblclick 进行编辑
- 日期选择器附加到日期列
- 在编辑时，我从隐藏字段中获取了 select db 键值，但我希望可以将其删除。
- 我有三个相邻的选择
这是我的 jqGrid 定义
$(document).ready(
function () {
// This is executed as soon as the DOM is loaded and before the page contents are loaded
var lastsel;
// $ is short for JQuery which is in turn a super overloaded function that does lots of things.
// # means select an element by its ID name, i.e. below we have <table id="ts"
// .jqGrid means attach a jqGrid 'thing' to all elements that have ts as their element name (there's only one)
// jqGrid is a thing defined in the jqGrid javascript file
$("#ts").jqGrid({
//=============
// Grid Setup
url: 'Timesheet/GridData/',
datatype: 'json',
mtype: 'GET',
pager: $('#pager'),
rowNum: 30,
rowList: [10, 20, 30, 40, 80],
viewrecords: true,
caption: 'Timesheet',
height: 450,
// Column definition
colNames: ['hCustomer_ID', 'hProject_ID', 'hTask_ID', 'Date', 'Customer', 'Project', 'Task', 'Description', 'Hours', '$'],
colModel: [
{ name: 'hCustomer_ID', index: 'hCustomer_ID', editable: false, hidden: true },
{ name: 'hProject_ID', index: 'hProject_ID', editable: false, hidden: true },
{ name: 'hTask_ID', index: 'hTask_ID', editable: false, hidden: true },
{ name: 'tsdate', index: 'tsdate', width: 80, editable: true, datefmt: 'yyyy-mm-dd' },
// Defintion for customer column
{name: 'Customer', index: 'Customer', width: 250, align: 'left', editable: true, edittype: "select",
editoptions: {
// Default URL used to populate drop down when the column goes into edit mode
dataUrl: 'Timesheet/CustomerList',
dataEvents: [
{
// this is the change handler. This is called when the customer is changed
type: 'change',
fn: function (e) {
// get a reference to the project and task drop downs on this same row
var eProject = '#' + $(this).attr("id").replace("_Customer", "_Project");
var eTask = '#' + $(this).attr("id").replace("_Customer", "_Task");
// Call getJSON to get data from a URL and process it with a callback function
$.getJSON(
// the URL to call
'Timesheet/ProjectListJSON',
// the parameter(s) to pass to the URL
{Customer_ID: this.value },
// The callback function. The results of the JSON call are passed into jData
function (jData) {
var selectHtml = ""
// Repopulate the project drop down with the results of the JSON call
$.each(
jData,
function (jdIndex, jdData) {
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";
});
// dont use innerHTML as it is not supported properly by IE
// insted use jQuery html to change the select list options
$(eProject).html(selectHtml);
// blank out tasks
$(eTask).html("");
} // END getJSON callback function definition
); // END getJSON function call
} // END change event definition
}] // END dataEvents definition
} // END editoptions list
}, // END Customer jqGrid field definition
// Definition for Project drop down
{name: 'Project', index: 'Project', width: 250, align: 'left', editable: true, edittype: "select",
editoptions: {
dataUrl: 'Timesheet/ProjectList',
dataEvents: [
{
type: 'change',
fn: function (e) {
var eTask = '#' + $(this).attr("id").replace("_Project", "_Task");
$.getJSON(
'Timesheet/TaskListJSON',
{ CustomerProject_ID: this.value },
function (jData) {
var selectHtml = "";
$.each(
jData,
function (jdIndex, jdData) {
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";
});
$(eTask).html(selectHtml);
} // END getJSON callback function definition
); // END getJSON function call
} // END change event handler definition
}] // END dataevents definition
} // END editoptions list
}, // END Project jqGrid field definition
{name: 'Task', index: 'Task', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/TaskList'} },
{ name: 'Desc', index: 'Desc', width: 300, align: 'left', editable: true },
{ name: 'Hours', index: 'Hours', width: 50, align: 'left', editable: true },
{ name: 'Charge', index: 'Charge', edittype: 'checkbox', width: 18, align: 'center', editoptions: { value: "0:1" }, formatter: "checkbox", formatoptions: { disabled: false }, editable: true }
],
//=============
// Grid Events
// when selecting, undo anything else
onSelectRow: function (rowid, iRow, iCol, e) {
if (rowid && rowid !== lastsel) {
// $(this).jqGrid('restoreRow', lastsel);
lastsel = rowid;
}
},
// double click to edit
ondblClickRow: function (rowid, iRow, iCol, e) {
// browser independent stuff
if (!e) e = window.event;
var element = e.target || e.srcElement
// When editing, change the drop down datasources to filter on the current parent
$(this).jqGrid('setColProp', 'Project', { editoptions: { dataUrl: 'Timesheet/ProjectList?Customer_ID=' + $(this).jqGrid('getCell', rowid, 'hCustomer_ID')} });
$(this).jqGrid('setColProp', 'Task', { editoptions: { dataUrl: 'Timesheet/TaskList?CustomerProject_ID=' + $(this).jqGrid('getCell', rowid, 'hProject_ID')} });
// Go into edit mode (automatically moves focus to first field)
// Use setTimout to apply the focus and datepicker after the first field gets the focus
$(this).jqGrid(
'editRow',
rowid,
{
keys: true,
oneditfunc: function (rowId) {
setTimeout(function () {
$("input, select", element).focus();
$("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
}, 50);
}
}
);
}, // end ondblClickRow event handler
postData:
{
startDate: function () { return $('#startDate').val(); }
}
}); // END jQuery("#ts").jqGrid
$("#ts").jqGrid('navGrid', '#pager', { view: false, edit: false, add: false, del: false, search: false });
$("#ts").jqGrid('inlineNav', "#pager");
}); // END jQuery(document).ready(function () {
此处的固定代码
我将更改事件处理程序定义从列定义中移到了 dblclick 事件处理程序中。它仍然不完美。我确信每次附加事件处理程序都会产生一些开销，并且当客户更改时，它会更新并选择第一个项目但会清除任务。
$(document).ready(
function () {
// This is executed as soon as the DOM is loaded and before the page contents are loaded
var lastsel;
// $ is short for JQuery which is in turn a super overloaded function that does lots of things.
// # means select an element by its ID name, i.e. below we have <table id="ts"
// .jqGrid means attach a jqGrid 'thing' to all elements that have ts as their element name (there's only one)
// jqGrid is a thing defined in the jqGrid javascript file
$("#ts").jqGrid({
//=============
// Grid Setup
url: 'Timesheet/GridData/',
datatype: 'json',
mtype: 'GET',
pager: $('#pager'),
rowNum: 30,
rowList: [10, 20, 30, 40, 80],
viewrecords: true,
caption: 'Timesheet',
height: 450,
// Column definition
colNames: ['hCustomer_ID', 'hProject_ID', 'hTask_ID', 'Date', 'Customer', 'Project', 'Task', 'Description', 'Hours', '$'],
colModel: [
{ name: 'hCustomer_ID', index: 'hCustomer_ID', editable: false, hidden: true },
{ name: 'hProject_ID', index: 'hProject_ID', editable: false, hidden: true },
{ name: 'hTask_ID', index: 'hTask_ID', editable: false, hidden: true },
{ name: 'tsdate', index: 'tsdate', width: 80, editable: true, datefmt: 'yyyy-mm-dd' },
// Defintion for customer column
{name: 'Customer', index: 'Customer', width: 250, align: 'left', editable: true, edittype: "select",
editoptions: {
// Default URL used to populate drop down when the column goes into edit mode
dataUrl: 'Timesheet/CustomerList',
dataEvents: [
{
// this is the change handler. This is called when the customer is changed
type: 'change',
fn: function (e) {
// get a reference to the project and task drop downs on this same row
var eProject = '#' + $(this).attr("id").replace("_Customer", "_Project");
var eTask = '#' + $(this).attr("id").replace("_Customer", "_Task");
// Call getJSON to get data from a URL and process it with a callback function
$.getJSON(
// the URL to call
'Timesheet/ProjectListJSON',
// the parameter(s) to pass to the URL
{Customer_ID: this.value },
// The callback function. The results of the JSON call are passed into jData
function (jData) {
var selectHtml = ""
// Repopulate the project drop down with the results of the JSON call
$.each(
jData,
function (jdIndex, jdData) {
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";
});
// dont use innerHTML as it is not supported properly by IE
// insted use jQuery html to change the select list options
$(eProject).html(selectHtml);
// clear task list
$(eTask).html("");
} // END getJSON callback function definition
); // END getJSON function call
} // END change event definition
}] // END dataEvents definition
} // END editoptions list
}, // END Customer jqGrid field definition
// Definition for Project drop down
{name: 'Project', index: 'Project', width: 250, align: 'left', editable: true,
edittype: "select", editoptions: { dataUrl: 'Timesheet/ProjectList'}
}, // END Project jqGrid field definition
{name: 'Task', index: 'Task', width: 250, align: 'left', editable: true, edittype: "select", editoptions: { dataUrl: 'Timesheet/TaskList'} },
{ name: 'Desc', index: 'Desc', width: 300, align: 'left', editable: true },
{ name: 'Hours', index: 'Hours', width: 50, align: 'left', editable: true },
{ name: 'Charge', index: 'Charge', edittype: 'checkbox', width: 18, align: 'center', editoptions: { value: "0:1" }, formatter: "checkbox", formatoptions: { disabled: false }, editable: true }
],
//=============
// Grid Events
// when selecting, undo anything else
onSelectRow: function (rowid, iRow, iCol, e) {
if (rowid && rowid !== lastsel) {
// $(this).jqGrid('restoreRow', lastsel);
lastsel = rowid;
}
},
// double click to edit
ondblClickRow: function (rowid, iRow, iCol, e) {
// browser independent stuff
if (!e) e = window.event;
var element = e.target || e.srcElement
// When editing, change the drop down datasources to filter on the current parent
// By default tasks are limited to the current project
$(this).jqGrid('setColProp', 'Task', { editoptions: { dataUrl: 'Timesheet/TaskList?CustomerProject_ID=' + $(this).jqGrid('getCell', rowid, 'hProject_ID')} });
// By default projects are limited to the current Customer (dataUrl)
// Also attach event handler to autopopulate tasks (dataEvents)
$(this).jqGrid('setColProp', 'Project', {
// editoptions: { dataUrl: 'Timesheet/ProjectList?Customer_ID=' + $(this).jqGrid('getCell', rowid, 'hCustomer_ID')} });
editoptions: {
dataUrl: 'Timesheet/ProjectList?Customer_ID=' + $(this).jqGrid('getCell', rowid, 'hCustomer_ID'),
dataEvents: [
{
type: 'change',
fn: function (e) {
var eTask = '#' + $(this).attr("id").replace("_Project", "_Task");
$.getJSON(
'Timesheet/TaskListJSON',
{ CustomerProject_ID: this.value },
function (jData) {
var selectHtml = "";
$.each(
jData,
function (jdIndex, jdData) {
selectHtml = selectHtml + "<option value='" + jdData.Value + "'>" + jdData.Text + "</option>";
});
$(eTask).html(selectHtml);
} // END getJSON callback function definition
); // END getJSON function call
} // END change event handler definition
}] // END dataevents definition
} // END editoptions list
} // END data to be applied to setColProp
); // END jqGrid setColProp
// Go into edit mode (automatically moves focus to first field)
// Use setTimout to apply the focus and datepicker after the first field gets the focus
$(this).jqGrid(
'editRow',
rowid,
{
keys: true,
oneditfunc: function (rowId) {
setTimeout(function () {
$("input, select", element).focus();
$("#" + rowId + "_tsdate").datepicker({ dateFormat: 'yy-mm-dd' });
}, 50);
}
}
);
}, // end ondblClickRow event handler
postData:
{
startDate: function () { return $('#startDate').val(); }
}
}); // END jQuery("#ts").jqGrid
$("#ts").jqGrid('navGrid', '#pager', { view: false, edit: false, add: false, del: false, search: false });
$("#ts").jqGrid('inlineNav', "#pager");
}); // END jQuery(document).ready(function () {
【问题讨论】：
-
如果您对问题进行了一些修改，或者您或其他人写了新的答案，我不会收到任何通知。因此，请在我的回答中写一个简短的评论，以通知我有关新信息的信息。
标签： javascript jquery jqgrid jquery-events jqgrid-asp.net