Jquery jqGrid-如何在编辑工具栏中动态加载组合框(ASP.NET MVC 2)
使用jqGrid,我试图找出如何动态加载下面的类别组合框 本文向我展示了数据必须如何以三种方式之一形成。选项1或2可以正常工作,因为我不想每次单击网格上的“编辑”按钮时都加载它。还是我也有 我的javascript:Jquery jqGrid-如何在编辑工具栏中动态加载组合框(ASP.NET MVC 2),jquery,asp.net-mvc-2,jqgrid,Jquery,Asp.net Mvc 2,Jqgrid,使用jqGrid,我试图找出如何动态加载下面的类别组合框 本文向我展示了数据必须如何以三种方式之一形成。选项1或2可以正常工作,因为我不想每次单击网格上的“编辑”按钮时都加载它。还是我也有 我的javascript: $(document).ready(function () { $('#grid').jqGrid({ colNames: ['TypeId', 'Type', 'CR Active', 'Category'], colModel: [ { name
$(document).ready(function () {
$('#grid').jqGrid({
colNames: ['TypeId', 'Type', 'CR Active', 'Category'],
colModel: [
{ name: 'TYPE_ID', index: 'TYPE_ID', hidden: true, search: false,
editable: true, editoptions: { readonly: true, size: 10 },
formoptions: { rowpos: 1, label: "Type Id", elmprefix: "(*)"} },
{ name: 'TYPE', index: 'TYPE', sortable: true, hidden: false,
editable: true, editoptions: { size: 25, maxlength: 30 },
formoptions: { rowpos: 2, label: "Type", elmprefix: "(*)" },
editrules: { required: true} },
{ name: 'CR_ACTIVE', index: 'CR_ACTIVE', align: 'right', sortable: true,
hidden: false, editable: true, edittype: "checkbox",
editoptions: { size: 25, value: "Yes:No", defaultValue: "Yes" },
formoptions: { rowpos: 3, elmprefix: " "} },
{ name: 'description', index: 'description', editable: true,
edittype: "select", editoptions: { value: { 1: 'One', 2: 'Two'} },
formoptions: { rowpos: 4, elmprefix: " "} }
],
pager: jQuery('#pager'),
sortname: 'TYPE',
rowNum: 10,
rowList: [10, 20, 50],
sortorder: "asc",
width: 600,
height: 250,
datatype: 'json',
caption: 'Available Types',
viewrecords: true,
mtype: 'GET',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata",
id: "TYPE_ID"
},
url: "/Type/GetData"
}).navGrid('#pager', { view: false, del: true, add: true, edit: true },
{ height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true,
bottominfo: "Fields marked with (*) are required", closeAfterEdit: true,
url: "/Type/Edit" }, // default settings for edit
{ height:150, reloadAfterSubmit:false, jqModal:false, closeOnEscape:true,
bottominfo: "Fields marked with (*) are required", closeAfterAdd: true,
url: "/Type/Create" }, // default settings for add
{ reloadAfterSubmit: false, jqModal: false, closeOnEscape: true,
url: "/Type/Delete" }, // delete instead that del:false we need this
{ closeOnEscape: true, multipleSearch: true, closeAfterSearch: true,
afterSubmit: function (response, postdata) {
alert("testing");
} }, // search options
{ height: 150, jqModal: false, closeOnEscape: true} /* view parameters*/
);
});
要以某种方式调用我的控制器以加载类别:
public JsonResult GetCategories()
{
string test = "Will be a string contructed as needed";
//have to return something if there is an issue
return Json(test);
}
据我所知,colmodel descriptions editoptions的dataUrl=GetCategories基本上会在每次按下add/edit按钮时调用这个json操作。我希望有人能举一个例子,说明如何将其合并到页面加载中
提前感谢。查看的更新部分。在我看来,它描述了你需要什么。您应该从action GetCategories返回JSON结果,并将JSON输入转换为自定义buildSelect函数中相应的HTML片段。因为您使用editoptions:{value:{1:'One',2:'Two'}}形式的editoptions,而不是editoptions:{value:{One:'One',Two:'Two'},所以您应该稍微修改操作代码和来自的buildSelect函数
还有一句话。因为您使用的“Category”列选项的格式为edittype:select,editoptions:{value:{1:'One',2:'Two'}},所以您可能希望在JSON数据中使用类别ID 1和2,并为用户显示值“One”和“Two”。在这种情况下,您应该添加额外的选项格式化程序:“选择”请参阅文档中的详细信息。我已尝试实施您的建议,但在调用buildSelect函数时,我无法从数据中获取任何信息。数据始终等于0。正在调用我的操作,我提供了一个简单的字符串1:'One',2:'Two',返回Jsonsimplestring,JsonRequestBehavior.AllowGet。然后调用buildSelect,但数据参数始终等于零。有什么原因吗?@Billy Logan:我建议您返回JsonresultList,JsonRequestBehavior.AllowGet,其中resultList有类型列表,MySel类有int-Id和String-Str属性。Oleg,我按照您的建议进行了设置。但是,将上面定义和填充的列表返回到BuildSelection函数会在jQuery.js文件和jQuery.jqGrid.js文件中引发javascript错误。另一方面,我能够使用Dolphy在原始响应链接中使用的类似逻辑来加载组合。我唯一没有弄清楚的问题是在组合中显示的最后一个选项项末尾的双引号。脚本如下所示:var Categories=$.ajax{type:GET,url:/type/GetCategories,dataType:json,async:false,success:function data{}.responseText;然后,在colmodel editoptions:{Categories}Oleg下,使用您提供的链接中的Dolphy示例以及Hogan的修复程序来解析组合的最后一个值上的双引号,我就能够实现这一点。如果您有时间,我仍然希望看到buildSelect函数工作,但是您的帮助让我找到了答案。非常感谢。