0

我有一个 Jqgrid 表，其中有列'ord'或顺序。我有更新按钮，单击该按钮应rows->column 'ord'使用新订单值更新所有内容，即var neworder = {"Banana": 1,"Orange": 2,"Apple": 3,"Mango": 4};

注意： var neworder = {"Banana": 1,"Orange": 2,"Apple": 3,"Mango": 4};不会有重量和数量等其他信息；只是新的订单值。

HTML：

<button id="update">Update</button>
<table id="grid"></table>

JSFIDDLE：http: //jsfiddle.net/bababalcksheep/Bpk3E/

JS：

var data = [
    [1,"Apple", "10", "2.3kg"],
    [2,"Orange", "25", "3kg"],
     [3,"Banana", "6", "1kg"],
     [4,"Mango", "50", "10kg"]
];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Ord','Fruit', 'Quantity', 'Weight'],
    colModel: [{name: 'order',width: 10},{name: 'fruit',width: 50},{name: 'quantity',width: 20},{name: 'weight',width: 20}],
    rownumbers: false,
    autowidth: true,
    caption: "Stack order"
});

// How to update col 'Ord' for all rows and trigger sort for that column
$( "#update" ).click(function() {
    var neworder = {"Banana": 1,"Orange": 2,"Apple": 3,"Mango": 4};
});
4

3 回答 3

2

在我看来，您只需要sorttype在列中使用定义为函数fruit。fruit它允许在按列排序的情况下实现任何自定义排序顺序。

您可以在此处找到更改后的演示：http: //jsfiddle.net/Bpk3E/13/ 它使用以下代码

var data = [
        {fruit: "Apple",  quantity: "10", weight: "2.3"},
        {fruit: "Orange", quantity: "25", weight: "3"},
        {fruit: "Banana", quantity: "6",  weight: "1"},
        {fruit: "Mango",  quantity: "50", weight: "10"}
    ],
    fruitOrder = {
        "Apple":  1,
        "Orange": 2,
        "Banana": 3,
        "Mango":  4
    };

$("#grid").jqGrid({
    datatype: "local",
    data: data,
    colNames: ["Fruit", "Quantity", "Weight"],
    colModel: [
        {name: "fruit", width: 100,
         sorttype: function (value) {
             return fruitOrder[value]; // return the order from fruitOrder
         }},
        {name: "quantity", width: 80, align: "right",
         formetter: "integer", sorttype: "integer"},
        {name: "weight", width: 80, align: "right", sorttype: "float",
         formatter: "currency", formatoptions: {decimalPlaces: 1, suffix: "kg"}}
    ],
    sortname: "fruit",
    rownumbers: true,
    gridview: true,
    autoencode: true,
    height: "auto",
    caption: "Stack order"
});

$( "#update").button().click(function() {
    fruitOrder = {"Banana": 1, "Orange": 2, "Apple": 3, "Mango": 4};
    $("#grid").trigger("reloadGrid");
});
于 2013-10-26T10:48:22.780 回答
1

我试过这个，它似乎更安全..

$("#update").click(function () {
    var neworder = {
        "Banana": 1,
            "Orange": 2,
            "Apple": 3,
            "Mango": 4
    };
    var dataArray = myGrid.jqGrid('getGridParam', 'data');
    var indexes = myGrid.jqGrid('getGridParam', '_index');
    var rowid;
    for (rowid in indexes) {
        if (indexes.hasOwnProperty(rowid)) {
            var which_row = myGrid.jqGrid('getCell', rowid, 'fruit');
            var newvalue = neworder[which_row];
            // first change the cell in the visible part of grid
            myGrid.jqGrid('setCell', rowid, 'order', newvalue);
            // now change the internal local data
            myGrid.jqGrid('getLocalRow', rowid).order = newvalue;
            // and now sort
            myGrid.jqGrid("sortGrid", "order", true);

        }
    }
});
于 2013-10-26T06:59:29.997 回答
0

您可以使用setGridParam来设置新数据。之后，您可能需要重新加载网格.trigger('reloadGrid')

$("#update" ).click(function() {
     var neworder = [ ... ];
     $('#grid').jqGrid('setGridParam', {data: neworder}).trigger('reloadGrid');  
});

例子

于 2013-10-26T06:35:32.323 回答