31
如何動態綁定jqGrid ?.列在設計時不可用，但僅在運行時纔可用。jqGrid和動態列綁定
在當前的jqGrid設計中，需要預先填充colmodels和其他屬性才能使網格正常工作。
在這個方向上的任何輸入是非常讚賞。
A
回答
34
試試這個中的document.ready：
$.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);
這項工作對我罰款。
+2
這是一個很酷的技巧，這肯定會起作用..唯一值得關注的是你需要有兩個帖子請求來綁定這個......一個用於獲取列和獲取網格數據..感謝您的輸入.. –
+1
不，你總是會得到一個帖子請求... 第一個請求是通過ayax cal，你得到的數據與你的列，在jsonstring 當你瀏覽數據時，它會使用「someurl/getdata」來得到的數據... 我也有這個問題，在開始時我有2個請求......但有了這個解決方案，首先在jsonstring中獲取數據，然後通過url，你會得到一個請求。 – bruno
+3
嗨，布魯諾可以請你分享整個代碼，比如如何在後端生成coldata，colName，coleMode。 –
2
每次添加列時重新創建網格是否可行？您可以在本地存儲數據，每次只使用動態列模型卸載/重新創建網格。
您可能還想看看一些動態顯示/隱藏列的演示。根據您有多少列，您可能可以在應用程序中使用相同的概念。
這有幫助嗎？
0
我試圖解決由布魯諾建議都與JSON和數據返回的jsonstring類型，它的作品，但
如果選擇datastr：冷
存在 - 數據不執行進一步的請求，雖然過濾器不工作，在第一次檢索的數據
不存在 - 網格加載數據雙重要求
0
我建議到exe可愛的$("#list").jqGrid('setGridParam',{datatype:'json'});在網格的loadComplete事件 - 這種方式網格將存在肯定。所以，只要添加以下電網的定義，而不是setTimeout(...)：
loadComplete : function() {
$ ("#list").jqGrid('setGridParam',{datatype:'json'});
}
爲我工作！
3
如果有人想使用mvc來實現這個功能，那麼http://blog.lieberlieber.com/2010/07/07/asp-net-mvc-and-a-generic-jqquery-grid-jqtgrid/是一個更好的解決方案。
2
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;
}
0
如果使用導入功能執行此操作，仍然可以使用jqGrid的分頁功能。確保「GetColumnsAndData」將正常的網格數據作爲「數據」和配置作爲「網格」返回（或者在「jsonGrid」中更改這些值）。
編輯：也請確保返回的「網格」設置之一是「網址」（與URL值檢索只有數據）。
$('#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'
}
});
0
**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));
}
0
試試這
$.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);
2
又一解決方案;
$("#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;
}
4
我的解決方案與Teoman Shipahi 2015年8月的出色答案類似。
我有一個Web服務，它返回一組JSON數據，但實際列可能隨時間而變化。
我想要做的是隱藏一些JSON列在我的jqGrid，並設置了一些基於列的寬度，如果這個特殊的JSON領域是重要領域之一（在這種情況下，SegmentName ）。
這就是我想出了：
$(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);
}
});
});
下面是它創建的jqGrid功能：
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',
});
}
希望這有助於。
顯然，我的解決方案的一個缺點是，它堅持要在顯示網格之前加載所有的JSON數據，而不是一次只加載一頁數據。如果你有大量的數據，這可能是一個問題。
相關問題
- 1. 問題顯示jqgrid動態列綁定
- 2. 如何動態綁定和JqGrid中的行和列？
- 3. 的jqGrid：設定cellattr和動態數列
- 4. jqGrid動態列和分組
- 5. jqGrid動態列
- 6. 動態列綁定
- 7. 動態綁定和靜態綁定
- 8. 靜態和動態綁定
- 9. 表列和行的動態綁定
- 10. 創建動態列和數據綁定
- 11. 的jqGrid動態列和數據化JSON
- 12. c + +動態綁定和java動態綁定有什麼區別？
- 13. 動態禁用jqgrid列
- 14. jqGrid動態下拉列表
- 15. jqGrid中的動態列
- 16. 動態定義一個jqGrid
- 17. 動態返回列的綁定列表
- 18. 的jqGrid和動態分組
- 19. 動態綁定
- 20. 動態綁定？
- 21. 靜態綁定與動態綁定
- 22. 動態和靜態綁定在Java中
- 23. 靜態和動態綁定的概念
- 24. 靜態綁定和動態綁定用例
- 25. 如何動態綁定jqGrid colModel格式器
- 26. Datagrid綁定在一個靜態列wpf和休息動態
- 27. 如何將IEnumerable列表綁定到JQGrid
- 28. Kendo Grid外鍵列動態綁定
- 29. ASP.NET MVC動態列表綁定
- 30. 彈簧動態列表綁定
你能分享整個代碼嗎？ result.colData的格式是什麼？ – 2010-10-21 05:39:30