Geek Answers Handbook

JqGrid on Clientside - swap / edit / sort requests

I am trying to create a system using jqgrid that does everything on the client side, i.e. use AJAX to retrieve the JSON object (using C # /. Net) and cache it in a javascript variable, and then populate several grids from this cache (addRowData), depending on the data. Everything works very well.

However, I am having trouble finding how to do some of the more complicated things now.

1) paging / sorting data without interacting with the server. Is it possible? Or it is required that I write custom swap functions (i.e. when the user has moved to page 2, get the next 10 entries from the cache and update the grid with them). Hope there is an automatic way to do this? How about sorting? Read some of the things that its server side offers, but maybe they were old articles? Not sure.

2) Allow users to see controls (mainly switches and a date picker) on each line, and these changes are reflected in the cache variable. I looked at the jqGrid editing functions, but it is like click / edit / save. Ideally, I would like the initial screen of the grid to display, for example, one of the columns that displays the pairs of radio buttons on each row, and the user can simply click on the ones that interest them (i.e. They don’t need to explicitly “edit” the row to see / change the switches.) This data is updated in the grid and, more importantly, in the cache variable that controls the grid.Is there an automatic way to bind controls to each row in a base client dataset? How to create controls in each cell and associate their value with the cell value?

Awful someone can point me in the right direction?

Thanks for any help you can give.

Bill

+5
source share
3 answers

Everything you want to have in part 1 of your question can be implemented using jqGrid 3.7.x. You must use the datatype: 'json'and parameters loadonce: true. The server should send all the data back. See jqgrid setGridParam datatype: local for an example.

. , jqGrid . ( / , ) jqGrid (, ). , . . jqGrid NOT / . loadonce: true, , loadonce: true datatype: 'json' datatype: 'local'. , , datatype: 'json' , .

: . , , , jqGrids ( div) div ( div jqGrid), . divs jQuery.show() jQuery.hide() , . Divs, , CSS display:none.

. jqGrid jQuery.remove() <table> paging <div> jQuery.after(). jqGrid . , , jqGrid divs div. , jqGrid id = "list", div id = "gbox_list". , <table>, paging <div> div, jQuery.empty() jQuery.html() div jqGrid.

jqGrid. , . . jqGrid: , , ( ) jqGrid. , , . - , -.

jqGrid. "Inline Editing" jqGrid. , ( , ), , ( ), .., . " " . , . " ", http://trirand.com/blog/jqgrid/jqgrid.html " ", " ". jqGrid - .

2: . , - , prmNames: { nd:null} jqGrid, Internet Explorer. , HTTP- GET ( jQuery.ajax ) , ajax rwquests , . - ( HTTP), jQuery.ajax.

3 : .

var myGrid = $("#mygrid").jqGrid({
    datatype: 'local',
    colModel: [
        { name: 'AID', label: 'Some ID', key: true, width: 100,
          editable: false, sorttype: "int" },
        { name: 'Name', width: 300, editable: false },
        { name: 'Group', width: 100, editable: false },
        { name: 'Info', width: 100, editable: false },
        { name: 'AValue', width: 100, editable: true, edittype: 'text' }
    ],
    pager: '#mypager',
    rowNum: 10,
    rowList: [10, 20, 500],
    viewrecords: true,
    autowidth: true,
    sortname: 'AID',
    sortorder: 'desc'
});
myGrid.jqGrid('navGrid','#mypager',{edit:false,add:false,del:false,search:false});

var mydata = [];
for (var i = 0; i < 100; i++) {
   mydata.push({AID:i,Name:"123",Group:"456",Info:"78",AValue:"8"});
}
myGrid.setGridParam({data: mydata}).trigger("reloadGrid");

http://www.ok-soft-gmbh.com/jqGrid/Clientside.htm

4: , , http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing.htm. http://www.trirand.com/blog/?page_id=393/help/losing-edited-cell-data-after-paging/ .

+6

jqGrid , , .

  • , , . , . - New in 3.7
+1

. InitGridTestBulkLoad , 10 . , 1 10.

, " ", "", . , , .

"" :

jQuery(document).ready(function() {
    jQuery("#mygrid").jqGrid({
        dataType: "local",
        data: {},
        colNames: ['AID', 'Name', 'Group', 'Info', 'AValue'],
        colModel: [
                        { name: 'AID', label: 'Some ID', index: 'SomeID', width: 100, editable: false, sorttype: "int" },
                        { name: 'Name', label: 'Name', index: 'Name', width: 300, editable: false },
                        { name: 'Group', label: 'Group', index: 'Group', width: 100, editable: false },
                        { name: 'Info', label: 'Info', index: 'Info', width: 100, editable: false },
                        { name: 'AValue', label: 'AValue', index: 'AValue', width: 100, editable: true, edittype: 'text' }
                      ],
        pager: '#mypager',
        rowNum: 10,
        rowList: [10, 20, 500],
        viewrecords: true,
        loadonce: true,
        autowidth: true,
        sortname: 'AID',
        sortorder: 'desc'
    });

});

var oJR = {};
oJR.rows = new Array();
function InitGridTestBulkLoad() {
    oJR.total = 100;
    oJR.page = 1;
    oJR.records = 100;
    for (var i = 0; i < 100; i++) {
        var s = i.toString();
        oJR.rows[i] = {};
        oJR.rows[i].id = i;
        oJR.rows[i].cell = [s, "123", "456", "78", "8"];
    }

    var mg = $("#mygrid");
    mg[0].addJSONData(oJR);
}
0

More articles:


All Articles