Jquery jqGrid动态列绑定
如何动态绑定jqGrid？。这些列在设计时不可用，但仅在运行时可用 在当前的jqGrid设计中，需要预先填充colmodels和其他属性，网格才能正常工作Jquery jqGrid动态列绑定,jquery,jqgrid,Jquery,Jqgrid,如何动态绑定jqGrid？。这些列在设计时不可用，但仅在运行时可用 在当前的jqGrid设计中，需要预先填充colmodels和其他属性，网格才能正常工作 非常感谢在这个方向上的任何输入。每次添加列时重新创建网格是否可行？您可以在本地存储数据，每次使用动态列模型卸载/重新创建网格 您可能还想查看一些动态显示/隐藏列的演示。根据您有多少列，您可能可以在应用程序中使用相同的概念 这有帮助吗？在文档中尝试此操作。准备就绪： $.ajax( { type: "POST",
非常感谢在这个方向上的任何输入。每次添加列时重新创建网格是否可行？您可以在本地存储数据，每次使用动态列模型卸载/重新创建网格 您可能还想查看一些动态显示/隐藏列的演示。根据您有多少列，您可能可以在应用程序中使用相同的概念
这有帮助吗？在文档中尝试此操作。准备就绪：
$.ajax(
{
type: "POST",
url: "SomeUrl/GetColumnsAndData",
data: "",
dataType: "json",
success: function(result)
{
colD = result.colData;
colN = result.colNames;
colM = result.colModel;
jQuery("#list").jqGrid({
jsonReader : {
cell: "",
id: "0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true
})
},
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50);
这对我来说很好。我已经尝试了bruno建议的解决方案，包括json和jsonstring类型的数据返回，它可以工作，但是
如果选项datastr:colD
存在-不执行进一步的数据请求，尽管过滤器对第一次检索到的数据有效
不存在-双重请求网格加载数据我建议执行
$（“#list”）.jqGrid（'setGridParam'，{datatype:'json'）加载网格的完整事件-这样网格将确实存在。因此，只需将以下内容添加到网格定义中，而不是setTimeout（…）
：
为我工作 如果有人想使用mvc实现此功能，那么这是一个更好的解决方案。函数列数据{
function columnsData(Data) {
var str = "[";
for (var i = 0; i < Data.length; i++) {
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
if (i != Data.length - 1) {
str = str + ",";
}
}
str = str + "]";
return str;
}
var str=“[”；
对于（变量i=0；i
如果使用导入功能，仍然可以利用jqGrid的分页功能。确保“GetColumnsAndData”将正常网格数据返回为“data”，将配置返回为“grid”（或在“jsonGrid”中更改这些值）
编辑：还要确保返回的“网格”设置之一是“url”（url值仅用于检索数据）
**数据表中的动态JQGrid**
$（文档）.ready（函数（）{
var ColN，ColM，ColD，capEN；
var sPath=window.location.pathname；
var sPage=sPath.substring（sPath.lastIndexOf（'/'）+1）；
//警报（sPage）；
$.ajax({
url:sPage+'？方法=getGridHeadData'，
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
数据：{}，
数据类型：“json”，
成功：功能（数据，st）{
如果（st=“成功”）{
ColN=data.rowsHead；//jqgrid标题数据
ColM=data.rowsM；//其列模型
ColD=data.rows；//数据
createGrid（）；
}
},
错误：函数（）{
警报（“AJAX回调错误”）；
}
});
函数createGrid（）{
jQuery（“#AccountingCodesGrid”）.jqGrid({
数据类型：“json”，
url:sPage+'？方法=getGridData'，
mtype:“POST”，
ajaxGridOptions:{contentType:'application/json；charset=utf-8'}，
serializeGridData:函数（postData）{
返回JSON.stringify（postData）；
},
jsonReader:{repeatitems:false，根：“行”，页：“页”，总计：“总计”，记录：“记录”}，
//数据：寒冷，
姓名：ColN，
科尔姆，
有一次：是的，
pager:jQuery（“#pager”），
行数：5，
行列表：[5,10,20,50]，
viewrecords：正确
})
}
jQuery（#AccountingCodesGrid”）.jqGrid（'navGrid'，'#Pager'，{edit:false，add:false，del:false}，null，null，true，{multipleSearch:true}）；
var height=$（window.height（）；
});
背后的代码
**页面加载中**
if（Request.QueryString[“method”]=“getGridData”）
{
Request.InputStream.Position=0；
StreamReader ipStRdr=新的StreamReader（Request.InputStream）；
字符串json=ipStRdr.ReadToEnd（）；
JavaScriptSerializer jser=新的JavaScriptSerializer（）；
Dictionary dict=jser.Deserialize>（json）；
getGridData（int.Parse（dict[“page”].ToString（）），int.Parse（dict[“rows”].ToString（）），bool.Parse（dict[“_search”].ToString（）），dict[“sord”].ToString（））；
Response.End（）；
}
else if（Request.QueryString[“method”]=“getGridHeadData”）
{
getGridHeadData（）；
Response.End（）；
}
**方法获取json格式的数据----------------------------------------------------**
public void getGridData（整型页面、整型行、布尔搜索、字符串排序）
{
DataTable dtRecords=dtSource；//数据表
int recordscont=dtRecords.Rows.Count；
JqGridData OBJQQGrid=新的JqGridData（）；
objqgrid.page=第页；
objqgrid.total=（（recordsCount+行-1）/行）；
objqgrid.records=recordscont；
objqgrid.rows=ConvertDT（dtRecords）；
List liob=新列表（）；
foreach（dtRecords.Columns中的DataColumn列）
{
liob.Add（column.ColumnName）；
}
objqgrid.rowsHead=liob；
List colcontentn=新列表（）；
foreach（liob中的var项目）
{
JqGridDataHeading obj=新的JqGridDataHeading（）；
obj.name=item.ToString（）；
obj.index=item.ToString（）；
列内容添加（obj）；
function columnsData(Data) {
var str = "[";
for (var i = 0; i < Data.length; i++) {
str = str + "{name:'" + Data[i] + "', index:'" + Data[i] + "', editable: true}";
if (i != Data.length - 1) {
str = str + ",";
}
}
str = str + "]";
return str;
}
$('#grid').jqGridImport({
imptype: 'json',
impurl: 'SomeUrl/GetColumnsAndData',
mtype: 'POST',
impData: {
'_search': 'false',
'sidx': 'loc_short_name',
'sord': 'asc',
'page': '1',
'rows': '25',
'searchField': '',
'searchOper': '',
'searchString': ''
// Add any additional, custom criteria
},
jsonGrid: {
config: 'grid',
data: 'data'
}
});
**Dynamic JQGrid From Data Table**
$(document).ready(function () {
var ColN, ColM, ColD, capEN;
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
//alert(sPage);
$.ajax({
url: sPage+'?method=getGridHeadData',
type: "POST",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
success: function (data, st) {
if (st == "success") {
ColN = data.rowsHead;//jqgrid heading data
ColM = data.rowsM; // its column model
ColD = data.rows; // Data
createGrid();
}
},
error: function () {
alert("Error with AJAX callback");
}
});
function createGrid() {
jQuery("#AccountingCodesGrid").jqGrid({
datatype: 'json',
url: sPage+'?method=getGridData',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
//data: ColD,
colNames: ColN,
colModel: ColM,
loadonce: true,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true
})
}
jQuery("#AccountingCodesGrid").jqGrid('navGrid', '#Pager', { edit: false, add: false, del: false }, null, null, true, { multipleSearch: true });
var height = $(window).height();
});
the code behind
**In page load..................................................................**
if (Request.QueryString["method"] == "getGridData")
{
Request.InputStream.Position = 0;
StreamReader ipStRdr = new StreamReader(Request.InputStream);
string json = ipStRdr.ReadToEnd();
JavaScriptSerializer jser = new JavaScriptSerializer();
Dictionary<string,> dict = jser.Deserialize<dictionary><string,>>(json);
getGridData(int.Parse(dict["page"].ToString()), int.Parse(dict["rows"].ToString()), bool.Parse(dict["_search"].ToString()), dict["sord"].ToString());
Response.End();
}
else if (Request.QueryString["method"] == "getGridHeadData")
{
getGridHeadData();
Response.End();
}
**Method to get data in json form----------------------------------------------------**
public void getGridData(int page, int rows, bool _search, string sord)
{
DataTable dtRecords = dtSource;// Data Table
int recordsCount = dtRecords.Rows.Count;
JqGridData objJqGrid = new JqGridData();
objJqGrid.page = page;
objJqGrid.total = ((recordsCount + rows - 1) / rows);
objJqGrid.records = recordsCount;
objJqGrid.rows = ConvertDT(dtRecords);
List<string> liob = new List<string>();
foreach (DataColumn column in dtRecords.Columns)
{
liob.Add(column.ColumnName);
}
objJqGrid.rowsHead = liob;
List<object> colcontetn = new List<object>();
foreach (var item in liob)
{
JqGridDataHeading obj = new JqGridDataHeading();
obj.name = item.ToString();
obj.index = item.ToString();
colcontetn.Add(obj);
}
objJqGrid.rowsM = colcontetn;
JavaScriptSerializer jser = new JavaScriptSerializer();
Response.Write(jser.Serialize(objJqGrid));
}
$.ajax(
{
type: "POST",
url: "SomeUrl/GetColumnsAndData",
data: "",
dataType: "json",
success: function(result)
{
colD = result.colData;
colN = result.colNames;
colM = result.colModel;
jQuery("#list").jqGrid({
jsonReader : {
cell: "",
id: "0"
},
url: 'SomeUrl/Getdata',
datatype: 'jsonstring',
mtype: 'POST',
datastr : colD,
colNames:colN,
colModel :colM,
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
viewrecords: true
})
},
error: function(x, e)
{
alert(x.readyState + " "+ x.status +" "+ e.msg);
}
});
setTimeout(function() {$("#list").jqGrid('setGridParam',{datatype:'json'}); },50);
$("#datagrid").jqGrid({
//url: "user.json",
//datatype: "json",
datatype: "local",
data: dataArray,
colNames:getColNames(dataArray[0]),
colModel:getColModels(dataArray[0]),
rowNum:100,
loadonce: true,
pager: '#navGrid',
sortname: 'SongId',
sortorder: "asc",
height: "auto", //210,
width:"auto",
viewrecords: true,
caption:"JQ GRID"
});
function getColNames(data) {
var keys = [];
for(var key in data) {
if (data.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
}
function getColModels(data) {
var colNames= getColNames(data);
var colModelsArray = [];
for (var i = 0; i < colNames.length; i++) {
var str;
if (i === 0) {
str = {
name: colNames[i],
index:colNames[i],
key:true,
editable:true
};
} else {
str = {
name: colNames[i],
index:colNames[i],
editable:true
};
}
colModelsArray.push(str);
}
return colModelsArray;
}
$(function () {
// Load the JSON data we'll need to populate our jqGrid
// ID of a [Segment_Set] record in our database (which our web service will load the data for.
var SegmentSetId = 12345;
$.ajax(
{
type: "GET",
url: "/Service1.svc/LoadSegmentAttributes/" + SegmentSetId,
dataType: "json",
success: function (JSONdata) {
//
// Work through our JSON data, and create the two arrays needed by jqGrid
// to display this dynamic data.
//
var listOfColumnModels = [];
var listOfColumnNames = [];
for (var prop in JSONdata[0]) {
if (JSONdata[0].hasOwnProperty(prop)) {
// We have found one property (field) in our JSON data.
// Add a column to the list of Columns which we want our jqGrid to display
listOfColumnNames.push(prop);
// How do we want this field to be displayed in our jqGrid ?
var bHidden = (prop == "SegmentID") || (prop == "SegmentSequenceInx");
var columnWidth = (prop == "SegmentName") ? 200 : 50;
listOfColumnModels.push({
name: prop,
width: columnWidth,
sortable: true,
hidden: bHidden
});
}
}
// Now we have our JSON data, and list of Column Headings and Models, we can create our jqGrid.
CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames);
}
});
});
function CreateJQGrid(JSONdata, listOfColumnModels, listOfColumnNames) {
// After loading the JSON data from our webservice, and establishing the list of
// Column Names & Models, we can call this function to create the jqGrid.
$("#SegmentRulesGrid").jqGrid({
datatype: "local",
data: JSONdata,
localReader: {
id: "SegmentID", // The Primary Key field in our JSONdata
repeatitems: false
},
mtype: "GET",
colNames: listOfColumnNames,
colModel: listOfColumnModels,
rowNum: 15,
loadonce: true,
gridview: true,
autowidth: true,
height: 350,
pager: '#pager',
rowList: [15, 30, 100, 300],
rownumbers: true,
viewrecords: true,
caption: 'Segment Rules',
});
}