在我的 JQGrid 中,我需要将数据动态加载到“公司”列中的下拉列表中。
看法:
<title>jqGrid for ASP.NET MVC - Demo</title>
<!-- The jQuery UI theme that will be used by the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" />
<!-- The Css UI theme extension of jqGrid -->
<link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />
<!-- jQuery library is a prerequisite for jqGrid -->
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
<!-- language pack - MUST be included before the jqGrid javascript -->
<script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>
<!-- the jqGrid javascript runtime -->
<script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../Content/MyStyle.css" />
<script type="text/javascript">
var myGrid = $('#list');
$(function () {
$("#list").jqGrid({
url: '/JqGridClients/DynamicGridData/',
datatype: 'json',
mtype: 'GET',
colNames: ['Edit', 'Address', 'Company', 'Name','Delete'],
colModel: [
{ name: 'ClientID', index: 'ClientID', search: false, width:30 , align: 'left', formatter: PKId_formatter },
{ name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' },
{ name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select', searchoptions: { dataUrl:'<%= Url.Action("GetDestinationList","JqGridClients") %>'}},
{ name: 'Name', index: 'Name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}},
{ name: 'DelClientID', index: 'DelClientID', search: false, width:45, align: 'left', formatter: PKId_delete_formatter}],
pager: jQuery('#pager'),
rowNum: 10,
width: '100%',
height: '100%',
rowList: [5, 10, 20, 50],
sortname: 'ClientID',
sortorder: "desc",
viewrecords: true,
loadonce: true,
caption: 'Clients',
}).navGrid('#pager', { search: true, edit: true, add: false, del: true, searchtext: "Search" });
$("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });
$("#list").setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
// $("#pager").jqGrid('search', {multipleSearch: true,multipleGroup: true,recreateFilter: true,overlay: 0});
});
function PKId_formatter(cellvalue, options, rowObject) {
return '<a href="JqGridClients/Edit?id=' + cellvalue + '" class="ui-icon ui-icon-pencil" ></a>';
}
function PKId_delete_formatter(cellvalue, options, rowObject) {
// return '<a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm("Are you sure want to delete?");" class="ui-icon ui-icon-trash"></a>';
return '<a href="JqGridClients/Delete?id=' + cellvalue + '" onclick="return confirm(\'Are you sure want to delete?\');" class="ui-icon ui-icon-trash"></a>';
}
</script>
<h2>Index</h2>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
将数据加载到下拉列表的控制器方法
public JsonResult GetDestinationList()
{
JqGridClientRepository rep = new JqGridClientRepository();
IEnumerable<Client> clients = rep.GetClients();
var li = from s in clients
select new
{
Company = s.Company
};
return Json(li, JsonRequestBehavior.AllowGet);
}
目前我在 JQGrid 上看不到下拉列表