当行处于编辑模式时隐藏/显示格式化程序按钮输入-inlinenav jqgrid
我希望在行处于编辑模式时显示格式化程序按钮输入，并在行处于非编辑模式时隐藏按钮。我的代码，
请帮助我实现这一目标。感谢。
更新后的整个代码：
jQuery.jqgrid v4.4.4 - 我使用visual studio 2015的NuGet包管理器安装。
//Grid View for Program Management
$(function () {
var Role = $("#hiddenRole").val();
$("#ProgramListGird").jqGrid({
url: '/Home/programGrid',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'Get',
colNames: ['id', 'Program', 'Unit', 'Active?', '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" id="addNewProgramId" value="Add New Program" onclick= "addNewProgram()"/>'],
colModel: [
{ key: true, name: 'id', index: 'id', hidden: true },
{
name: 'ProgramDesc', index: 'ProgramDesc', editable: true, width: "580px",
editrules: { custom: true, custom_func: programDescValidation
}
},
{
name: 'UnitID', index: 'UnitID', editable: true, edittype: 'select', width: "200px",
formatter: 'select', editoptions: { value: "Unit1:Unit1 ; Unit2/3:Unit2/3" },
editrules: { custom: true, custom_func: dupicateRecordValidation
}
},
{
name: 'InActive', index: 'InActive', editable: true, formatter: 'select', width: "200px",
stype: 'select', edittype: 'select', editoptions: { value: "false:No;true:Yes" }
},
{
name: 'SaveChanges',
sortable: false, align: "center", classes: "button", width: "400px",
formatter: function (cellvalue, options, rowObj) {
var cBtn = '<input type="button" id= "saveChangesId" value="Save Changes" onclick= "saveChanges(' + "'" + rowObj.id + "'" + '\)"/>'
return cBtn;
}
}
],
//autoResizing: { compact: true },
//autoResizable: true,
pager: jQuery('#pager'),
rowNum: 3,
rowList: [3, 6, 9, 12],
height: '100%',
//shrinkToFit: false,
//height: '300',
width: '1328',
//width: outerwidth,
scrollerbar: true,
viewrecords: true,
caption: 'Program' + " " + Role,
//loadonce: true,
emptyrecords: 'No records to display',
scrollerbar: false,
//editurl: '/Home/programGridSave',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
hidegrid: false,
//autowidth: true,
multiselect: false,
onSelectRow: function (id) {
rowSelect(id);
},
}).navGrid('#pager', { edit: false, add: false, del: false, search: false, cancel: false, reload: false, refresh: false }) .jqGrid("gridResize"),
$("#ProgramListGird").jqGrid('inlineNav', '#pager',
{
edit: false, add: false, save: false, cancel: false, reload: false, refresh: false, restoreAfterSelect: false,
});
});
控制器JSON返回方法：
List<ProgramModel> programModelList = new List<ProgramModel>();
ProgramModel programModel = new ProgramModel();
public JsonResult programGrid(string sidx, string sord, int page, int rows) //Gets the todo Lists.
{
programModel.id = "001";
programModel.ProgramDesc = "A";
programModel.InActive = true;
programModel.UnitID = "Unit1";
programModelList.Add(programModel);
programModel = new ProgramModel();
programModel.id = "002";
programModel.ProgramDesc = "B";
programModel.InActive = true;
programModel.UnitID = "Unit1";
programModelList.Add(programModel);
programModel = new ProgramModel();
programModel.id = "003";
programModel.ProgramDesc = "C";
programModel.InActive = true;
programModel.UnitID = "Unit2/3";
programModelList.Add(programModel);
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var results = programModelList.Select(emp => new
{
emp.id,
emp.InActive,
emp.ProgramDesc,
emp.UnitID,
});
int totalRecords = results.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
if (sord.ToUpper() == "DESC")
{
results = results.OrderByDescending(s => s.id);
results = results.Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
results = results.OrderBy(s => s.id);
results = results.Skip(pageIndex * pageSize).Take(pageSize);
}
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = results
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
当前行为：
1 个答案:
答案 0 :(得分：1)
我建议你从非常古老的4.4.4版本的jqGrid更新到免费的jqGrid 4.13.5（或4.13.6，我将在今天发布）。我建议您另外使用formatter: "actions"（或更好template: "actions"）而不是您当前使用的自定义格式化程序。 formatter: "actions"和inlineNav都使用（在免费的jqGrid中）事件jqGridInlineEditRow来隐藏/禁用内联编辑开始时的“保存”和“删除”按钮并显示/启用“保存”并取而代之的是“取消”。在相同的formatter: "actions"和inlineNav注册jqGridInlineAfterRestoreRow和jqGridInlineAfterSaveRow事件中，从“保存”和“取消”按钮切换回“保存”和“删除”结束后编辑。保持formatter: "actions"和inlineNav的按钮始终保持同步是非常安全的方式。
如果您想了解如何实现自定义格式化程序，那么您可以使用自定义格式化程序修改列的定义。您应该考虑以下事项：
- 您当前的代码包含带按钮的列的无
name属性。这是一个错误。对于name的每个项，唯一的id属性（对应于colModelHTML的要求（例如，内部不允许空格）是必需。< / LI> - 您在最后一栏中使用
class: "button"，但您的意思可能是classes而不是class（请参阅the documentation）。可以指定多个类除以空格。如果您将属性名称修改为classes，那么您将在class="button"元素上看到包含该按钮的<td>属性。因此，您可以删除style的{{1}}属性，并将内联CSS属性移动到相应的CSS规则 - 您目前使用
.button input { display: inline-block; padding: 3px 12px; margin: 0px 0px; font-size: 12px; font-weight: normal; text-align: center; white-space: nowrap; border-radius: 4px; overflow: visible; border:1px solid #444444; color: #000; box-shadow: 2px 3px 1px 0px #cccccc; }。我建议您将onclick= "saveChanges(' + "'" + rowObj.id + "'" + '\)"的代码更改为
'<input type="button" ... value="Save Changes"/>onclick我们将onclick="return saveChanges.call(this,event);"
的{{1}}初始化为按钮并转发this对象作为全局saveChanges函数的第一个参数。
可以使用相关操作获取所有必需信息并在同一Event或saveChanges 中查找元素。 <td>或更好<tr>是外部单元格（DOM元素的jQuery包装器，表示单元格）。要获得var $td = $(this).closest("td");，可以使用var $td = $(this).closest("tr.jqgrow>td");或更好<tr>。如果之前使用var $tr = $td.closest("tr");，则可以使用var $tr = $td.closest("tr.jqgrow");。要获得var $tr = $td.parent();，只需使用var $td = $(this).closest("tr.jqgrow>td");，依此类推。人们实际上只能使用相对路径。
内部同样rowid。因此，我建议您使用它而不是自定义格式化程序。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？