未在jqgrid中加载json数据
问题描述:
为什么json数据无法在jqgrid中加载?未在jqgrid中加载json数据
我使用ASP.net使用C#使用的jqGrid JavaScript的& AJAX
这里是我下面的代码:
public string Alarm_Main()
{
SqlConnection con = new SqlConnection(ConnString);
DataTable dt = new DataTable();
con.Open();
string query = "select * from MST_ALARM_TYPE";
SqlDataAdapter da = new SqlDataAdapter(query, con);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
return JsonConvert.SerializeObject(ds.Tables[0]);
}
在文件:DataService.aspx下面的代码给出:
<script>
$(function() {
$("#list").jqGrid({
url: 'DataService.asmx/Alarm_Main',
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
alert(JSON.stringify(postData));
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json;charset=utf-8;" },
loadonce: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
colNames: ['', '알람코드', '등록날짜', '알람명', '등록자', ''],
colModel: [
{ name: 'myradio', width: 30, search: false, fixed: true, align: 'center', resizable: false, sortable: false, frozen: true, formatter: function (cellValue, option) { return '<input type="radio" name="radio_' + option.gid + '"/>'; }, frozen: true },
{ name: 'alarm_type_code', index: 'alarm_type_code', align: 'center', width: 200, frozen: true, sorttype: 'number' },
{ name: 'regist_date', index: 'regist_date', width: 200, editable: true, frozen: true, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: "Y-m-d" } },
{ name: 'alarm_type_name', index: 'alarm_type_name', width: 200, frozen: true },
{ name: 'regist_name', index: 'regist_name', width: 200, frozen: true },
{ name: 'myac', width: 50, search: false, fixed: true, sortable: false, resizable: false, fommatter: 'action', formatoptions: {keys:true}}
],
rowNum: 10,
rowList: [5, 10, 20, 50],
width: '100%',
pager: '#pager',
gridview: true,
rownumbers: false,
sortable: true,
multiselect: true,
scrollOffset: 0,
cellEdit: true,
sortorder: 'desc',
caption: '그리드 제목',
height: '100%',
shrinkToFit: true,
loadonce: true
});
jQuery("#list").jqGrid('setFrozenColumns');
jQuery("#list").trigger('reloadGrid');
jQuery("#list").jqGrid('navGrid', '#pager', { excel: true, add: true, edit: true, view: true, del: true, search: true, refresh: true },
{ closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true },
{ closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true },
{ reloadAfterSubmit: false, closeOnEscape: true },
{ multipleSearch: true, multipleGroup: true, showQuery: true, closeOnEscape: true, onSearch: function() { } }, { closeOnEscape: true });
jQuery("#list").jqGrid('bindKeys', { "onEnter": function (rowid) { alert("You enter a row with id:" + rowid) } });
jQuery("#list").jqGrid('navButtonAdd', '#pager', { caption: "Excel", onClickButton: function() { jquery("#list").jqGrid('excelExport', { url: 'D:\\' }); } });
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
});
</script>
我在屏幕上看不到任何东西。
可能是什么问题?
答
下面是一个例子,如何使用ado.net与jqgrid,我希望这会对你有所帮助。
控制器”
public ActionResult GetCustomer(int rows, string sidx, string sord, int page)
{
List<Customer> _customerList = new List<Customer>();
DataTable dt = new DataTable();
string strConString = @"Data Source=gen5win10;Initial Catalog=AsifDb;Integrated Security=True";
using (SqlConnection con = new SqlConnection(strConString))
{
con.Open();
SqlCommand cmd = new SqlCommand("Select * from Customer", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.SelectCommand = cmd;
DataSet ds = new DataSet();
da.Fill(ds);
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
Customer cobj = new Customer();
cobj.CustomerId = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString());
cobj.ID = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString());
cobj.Name = ds.Tables[0].Rows[i]["Name"].ToString();
cobj.Phone = ds.Tables[0].Rows[i]["Phone"].ToString();
cobj.Address = ds.Tables[0].Rows[i]["Address"].ToString();
cobj.Date = Convert.ToDateTime(ds.Tables[0].Rows[i]["Date"].ToString());
_customerList.Add(cobj);
}
}
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var Results = _customerList.Select(
a => new
{
a.ID,
a.Name,
a.Phone,
a.Address,
a.Date,
});
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);
}
HTML:
<link href="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" />
<link href="~/Scripts/Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script>
<h2>Customers</h2>
<br>
<script type="text/javascript">
$(document).ready(function() {
$('#sample').jqGrid({
datatype: 'Json',
url: '/Customer/GetCustomer',
type: 'POST',
colNames: ['ID', 'Name', 'Phone', 'Address', 'Date'],
colModel:
[
{key:true , name: 'ID', index: 'ID', editable: false },
{name: 'Name', index: 'Name', editable: true ,editoptions: {maxlength: 15 },editrules:{ required: true, }, },
{ name: 'Phone', index: 'Phone', editable: true, editoptions: { maxlength: 15, },editrules: { required: true, },},
{name: 'Address', index: 'Address', editable: true, editoptions: { maxlength: 30,}, editrules: {required: true,},},
{ name: 'Date', index: 'Date', editable: false, formatter: "date" },
],
pager: jQuery('#pager'),
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "record",
repeatitems: false,
Id: "0"
},
caption: 'Sample JqGrid Table',
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
// multiselect: true
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true },
{
// edit options
url: '/Customer/EditCustomer',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response)
{
if (response.responseText) {
alert(response.responseText);
}
}
},
{
//add
url: '/Customer/AddCustomer',
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{ //Options for Delete
url:'/Customer/DeleteCustomer',
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response)
{
if (response.responseText) {
alert(response.responseText);
}
}
}
);
});
</script>
<table id="sample"></table>
<div id="pager"> </div>