liaison de colonne jqGrid et dynamique
Comment lier dynamiquement jqGrid ?. Les colonnes ne sont pas disponibles au moment de la conception mais ne le seront que lors de l'exécution.
Dans la conception actuelle de jqGrid, les modèles de colonnes et autres propriétés doivent être pré-remplis pour que la grille fonctionne correctement.
Toute contribution dans ce sens est grandement appréciée.
Essayez ceci dans 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);
cela fonctionne bien pour moi.
Ma solution est un peu la même idée que l'excellente réponse de Teoman Shipahi d'août 2015.
J'ai un service Web qui renvoie un ensemble de données JSON, mais les colonnes pourraient varier avec le temps.
Ce que je voulais faire était hide certaines des colonnes JSON de mon jqGrid et définir la largeur de certaines des colonnes en fonction du fait que ce champ JSON particulier était l’un des champs importants (dans ce cas, SegmentName).
Voici ce que je suis venu avec:
$(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);
}
});
});
Et voici la fonction qui crée le 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',
});
}
J'espère que cela t'aides.
De toute évidence, l’un des inconvénients de ma solution est qu’elle insiste pour que vous chargiez toutes de vos données JSON avant de les afficher dans une grille, plutôt que de charger une seule page des données à la fois. Cela pourrait être un problème si vous avez une énorme quantité de données.
Si quelqu'un veut implémenter cette fonctionnalité à l'aide de mvc, alors http://blog.lieberlieber.com/2010/07/07/asp-net-mvc-and-a-generic-jqquery-grid-jqtgrid/ est un solution plus agréable.
Encore une autre solution.
$("#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;
}
Est-il possible de recréer la grille chaque fois qu'une colonne est ajoutée? Vous pouvez stocker les données localement et simplement décharger/recréer la grille à chaque fois, à l'aide d'un modèle de colonne dynamique.
Vous pouvez également consulter certaines des démos qui affichent/cachent des colonnes de manière dynamique. Selon le nombre de colonnes que vous avez, vous pourrez peut-être utiliser le même concept dans votre application.
Est ce que ça aide?
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;
}
**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));
}
essayez ceci sur
$.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);
J'ai essayé la solution suggérée par bruno avec les types de retour de données json et jsonstring, cela fonctionne MAIS
if option datastr: colD
existe - les autres demandes de données ne sont pas exécutées, bien que le filtre fonctionne pour les premières données extraites
n'existent pas - double demande de données sur le chargement du réseau
Je suggérerais d'exécuter $("#list").jqGrid('setGridParam',{datatype:'json'}); sur l'événement loadComplete de la grille - de cette façon, la grille existera à coup sûr. Donc, ajoutez simplement ce qui suit à la définition de la grille au lieu de setTimeout(...):
loadComplete : function () {
$ ("#list").jqGrid('setGridParam',{datatype:'json'});
}
Travaillé pour moi!
Si vous le faites avec la fonctionnalité d'importation, vous pouvez toujours utiliser les fonctionnalités de pagination de jqGrid. Assurez-vous que "GetColumnsAndData" renvoie les données de grille normales en tant que "données" et la configuration en tant que "grille" (ou modifiez ces valeurs dans "jsonGrid").
EDIT: assurez-vous également que l’un des paramètres de la "grille" renvoyé est "url" (avec une valeur d’URL pour extraire uniquement les données).
$('#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'
}
});