jqGrid重载上的多个编辑和删除按钮
即时通讯使用jqGrid和asp.net mvc2 ...问题是我在按钮点击事件上调用网格..现在是时候如果我点击按钮网格正在重新加载，但编辑和刷新按钮显示更多比一次..如何解决这个问题？
这是图像
function BindGrid() {
if (!firstClick) {
$("#list").trigger("reloadGrid");
}
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: { StartDate: $('#StartDate').val(), EndDate: $('#EndDate').val(),
siteId: $('#ListFacility') ? $('#ListFacility').val() : -1 },
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time',
'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
'TouchLimit AM', 'Total Touches', 'Total Mileage', 'IsWeekend'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, align: 'left',
/* key: true,*/editable: false, editrules: { edithidden: false },
hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, align: 'left',
formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text',
editrules: { required: true, date: true },
formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, align: 'left',
editable: true, edittype: 'select', formatter: 'select',
editrules: { required: true }, formoptions: { elmsuffix: ' *' },
editoptions: { dataInit: function (elem) {
$(elem).empty()
.append("<option value='1'>o</option>")
.append("<option value='2'>c</option>");
}
} },
{ name: 'StartTime', index: 'StartTime', width: 100, align: 'left',
formatter: 'date', datefmt: 'g:i A', editable: true, edittype: 'text',
editrules: { required: true, date: true },
formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, align: 'left',
formatter: 'date', datefmt: 'g:i A', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50,
align: 'left', editable: true, edittype: 'text',
editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'IsWeekend', index: 'IsWeekend', width: 200,
align: 'left', editable: false, hidden: false}
],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: true,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend)
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}).navGrid('#listPager',
{ edit:true, add:false, del:false, search:false, refresh:true });
}
2 个答案:
答案 0 :(得分：1)
您应使用$("#list").jqGrid({...})创建网格，并仅使用navGrid 添加导航按钮。我认为您的BindGrid函数将在程序中被称为两次，因此您拥有两次所有按钮。您可以轻松验证这在alert("in BindGrid");函数内的某处添加了BindGrid。
更新：我读了你的代码，这是我的建议：
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$("#StartDate").datepicker({
changeMonth: false,
changeYear: false
});
$("#EndDate").datepicker();
var checkMileageLimit = function(value, colname) {
alert($("#TotalMileage").val());
if (value > $("#TotalMileage").val()) {
alert(false);
return ["false", "value shuld be less"];
} else {
alert(true);
return ["true",""];
}
};
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: {
StartDate: function() { return $('#StartDate').val(); },
EndDate: function() { return $('#EndDate').val(); },
siteId: function() { return $('#ListFacility') ? $('#ListFacility').val() : -1; }
},
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time',
'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM',
'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, /* key: true,*/editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text', editrules: { required: true, date: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'}} },
{ name: 'StartTime', index: 'StartTime', width: 100, editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, editable: true,
edittype: 'text', editrules: { custom: true, custom_func: checkMileageLimit,
required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50, editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'WeekDay', index: 'WeekDay', width: 200, editable: false, hidden: false}
],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: false,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend) {
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}
}).navGrid('#listPager',
{ edit: true, add: false, del: false, search: false, refresh: true }
);
$('#btnSubmit').click(function () {
$("#list").trigger("reloadGrid");
});
});
//]]>
</script>
我建议您使用属性作为函数的postData，然后在每次刷新时都会调用该函数，您可以从相应的HTML控件中获取实际值。您可以在my old answer中详细了解该技术。您可能会发现其他一些小变化。
此外声明
$('#ListFacility') ? $('#ListFacility').val() : -1;
对我来说似乎不正确，因为$('#ListFacility')将始终是一个对象。因为你没有发布和HTML代码我无法解决它。你应该自己做。
此外，如果您使用gridview:true并在loadComplete函数内部设置颜色而不是使用afterInsertRow函数，则可能会在网格中获得更好的性能。请参阅this old answer作为gridview选项的示例和说明。
答案 1 :(得分：0)
感谢你的回答...它工作了我已经在按钮点击了一个if else检查它是否是第一次点击或后续点击然后它工作...但是当我调用reloadgrid我仍然看到相同的旧parmaeters传递给控制器..其他是文本框和下拉列表，其值发生变化然后我点击提交按钮重新加载网格..我使用 postData 参数将其他值传递给控制器
<script type="text/javascript">
var firstClick = true;
$(document).ready(function () {
$("#StartDate").datepicker({
changeMonth: false,
changeYear: false
});
$("#EndDate").datepicker();
var updateDialog = {
url: '<%= Url.Action("UpdateGrid", "TouchSchedule") %>'
, closeAfterAdd: true
, closeAfterEdit: true
};
$('#btnSubmit').click(function () {
$("#list").clearGridData();
if (!firstClick) {
alert($('#ListFacility').val());
$("#list").trigger("reloadGrid");
}
else {
firstClick = false;
/* Refreshes the grid */
$("#list").jqGrid({
url: '<%= Url.Action("GetScheduleInfo", "TouchSchedule") %>',
datatype: 'json',
mtype: 'GET',
postData: { StartDate: $('#StartDate').val(), EndDate: $('#EndDate').val(), siteId: $('#ListFacility') ? $('#ListFacility').val() : -1 },
colNames: ['SiteID', 'Cal Date', 'Store Open', 'Start Time', 'End Time', 'MileageLimit AM', 'MileageLimit PM', 'TouchLimit PM', 'TouchLimit AM', 'Total Touches', 'Total Mileage', 'WeekDay'],
colModel: [
{ name: 'SiteID', index: 'SiteID', width: 40, align: 'left', /* key: true,*/editable: false, editrules: { edithidden: false }, hidedlg: true, hidden: false },
{ name: 'CalDate', index: 'CalDate', width: 100, align: 'left', formatter: 'date', datefmt: 'm/d/Y', editable: true, edittype: 'text', editrules: { required: true, date: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'StoreOpen', index: 'StoreOpen', width: 40, align: 'left', editable: true, edittype: 'select', formatter: 'select', editrules: { required: true }, formoptions: { elmsuffix: ' *' }, editoptions: { value: { o: 'Open', c: 'closed'}} },
{ name: 'StartTime', index: 'StartTime', width: 100, align: 'left', editable: true, formatter: 'date', masks: 'ShortTime', edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'EndTime', index: 'EndTime', width: 100, align: 'left', editable: true, edittype: 'text', editrules: { time: true, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitAM', index: 'MileageLimitAM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { custom: true, custom_func: CheckMileageLimit, required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'MileageLimitPM', index: 'MileageLimitPM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitAM', index: 'TouchLimitAM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TouchLimitPM', index: 'TouchLimitPM', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalTouches', index: 'TotalTouches', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'TotalMileage', index: 'TotalMileage', width: 50, align: 'left', editable: true, edittype: 'text', editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
{ name: 'WeekDay', index: 'WeekDay', width: 200, align: 'left', editable: false, hidden: false}],
pager: $('#listPager'),
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'CalDate',
sortorder: "desc",
viewrecords: true,
caption: 'Schedule Calendar',
autowidth: false,
afterInsertRow: function (rowid, rowdata) {
if (rowdata.IsWeekend)
$(this).jqGrid('setRowData', rowid, false, { color: 'blue' });
}
}).navGrid('#listPager',
{
edit: true, add: false, del: false, search: false, refresh: true
}
);
}
});
});
function CheckMileageLimit(value, colname)
{
alert($("#TotalMileage").val());
if (value > $("#TotalMileage").val())
{
alert(false);
return ["false", "value shuld be less"];
}
else
{
alert(true);
return ["true",""];}
}
</script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？