0

サブグリッドで構成される動的jqgridを作成しようとしています。つまり、サブグリッドはメインjqgridに従ってデータベースからデータをロードする必要があるため、メインjqgridに従ってサブグリッドを動的にロードするためのロジックを取得できません。ここに私のjsファイルのコードを投稿しています

var InstructorsTabSc = function() 
{
var that = {};
var _parent = null;
var _instructorDlgMgrC = null;  
var _view = null;
var _panel = null;
var _path = null;
var BEGIN = "BEGIN";
var STARTING = "STARTING";
var READY = "READY";
var END = "END";
var _state = BEGIN;
var _transition = function(newState) {
    _state = newState;
    switch(_state) {
        case STARTING: _enterStarting(); break;
        case END: _enterEnd(); break;
    }
};
that.create = function(parent, path, panel) {

    _parent = parent;
    _path = path;
    _panel = panel;
    _transition(STARTING);
};      
that.destroy = function() {

    _transition(END);
};  
var _enterStarting = function() {

    var path = _path + '/InstructorsDlgMgrC';
    modelMgr.loadInclude( path + '/InstructorsDlgMgrC.js', function() {
        modelMgr.getHTML( _path + '/InstructorsTabSc.html', function(html) {

            _instructorDlgMgrC = InstructorsDlgMgrC();
            _instructorDlgMgrC.create(that, path);

            var req = {
                    programId :$('#programsList').val()
            };
            var fnSuccess = function(res) {
                _view = InstructorsTabV();
                _view.create(that, _panel, html, res);
            };
            serviceMgr.loadInstructor(req, fnSuccess, fnFailOrError, fnFailOrError);        
        });
    });
};      
var _enterEnd = function() {

    if (_view != null) {
        _view.destroy();
        _view = null;
    }

    _path = null;
    _parent = null;
};
return that;    
};      
var InstructorsTabV = function() 
{

var that = {};
var _sc = null; 
var _panel = null;      
that.create = function(sc, panel, html, res) {  
    _sc = sc;
    _panel = panel;
    that.layoutUi(html, res);
};      

that.layoutUi = function(html, res) {
    $(_panel).html(html);
    that.initInstructorGrid(res);
};

that.destroy = function() {
    $(_panel).html('');
    _sc = null;
};

that.initInstructorGrid = function(data) {      

    var grid = $("#instructorGrid");
        grid.jqGrid({
        data: data.instructors,
        datatype: "local",
        colNames:['Name','User ID', 'Is Active'],
        colModel:[
            {name:'firstName',index:'id', key: true, width:300},
            {name:'email',index:'Sname', width:370, formatter:'email'},
            {name:'isActive',index:'name',width:170,align:'center',editable: true, formatter: 'checkbox',formatoptions:{disabled:false}}
        ],
        pager:false,
        pgbuttons: false,
        pgtext: null,
        toppager:false,
        sortname: 'id',
        sortorder: 'asc',
        viewrecords: false,
        autowidth: true,
        height: "100%",
        subGrid: true,
        subGridOptions: { "plusicon" : "ui-icon-triangle-1-e",
                          "minusicon" :"ui-icon-triangle-1-s",
                          "openicon" : "ui-icon-arrowreturn-1-e",
                          "reloadOnExpand" : false,
                          "selectOnExpand" : true },
        subGridRowExpanded: function(subgrid_id, row_id) {
            var subgrid_table_id, pager_id; subgrid_table_id = subgrid_id+"_t";
            pager_id = "p_"+subgrid_table_id;
            $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
        $("#"+subgrid_table_id).jqGrid({

            data: data.subjects,
            datatype: "local",
            colNames: ['Subject','Is Active','Sessions'],
            colModel: [ {name:"subjectName",index:"num", key: true, width:270},
                        {name:"sessionCount",index:"item",width:160,align:'center',editable: true, formatter: 'checkbox',formatoptions:{disabled:false}},
                        {name:"programUserId",index:"qty",width:380}], 

            pager: false,
            pgbuttons: false,
            pgtext: null,
            sortname: 'num',
            sortorder: "asc",
            autowidth: true,
            height: '100%' });

            $("#gview_"+subgrid_table_id).attr("style","border-left:1px solid #666;");
            $("#"+pager_id).attr("style","height:40px");
            $("#"+"pg_"+pager_id +" table"+" tbody" +" tr").attr("style","background:#FFF");
        }
    });

};
return that;    
};

そして、これがサーブレットのコードです

 @WebServlet("/app/LoggedInSc/AdminSc/AdminTabsetSc/PeopleSc/InstructorsSc/getInstructors")
public class GetInstructors extends JSONServlet {

private static final long serialVersionUID = 1L;

@Override
protected JsonResponse action(TransactionHandler th, JSONObject json)  throws JSONException, CustomExceptionInvalidInput, Exception {       

    int programId = json.getInt("programId");

    List<Map<String, String>> instructorList = new ArrayList<Map<String, String>>();
    List<Map<String, String>> subjectList = new ArrayList<Map<String, String>>();

    for(ProgramUsersDetailDao daoProgramUser : ProgramUsersDetailDao.getProgramUsersByRole(th, programId, ProgramRoles.Instructor)) {

        instructorList.add(daoProgramUser.toMap());

        for(InstructorSubjectSessionsDao daoSubjectSessions : InstructorSubjectSessionsDao.getSubjectAndSessions(th, daoProgramUser.id))
        {
            subjectList.add(daoSubjectSessions.toMap());
        }
    }
    RESULT_OK.addDataParam("instructors", instructorList);
    RESULT_OK.addDataParam("subjects", subjectList);        
    return RESULT_OK;       
}
}

データベースに従って動的にメイングリッドに従ってサブグリッドにデータをロードする方法を教えてください

4

1 に答える 1

1

If you need to load data in subgrid dynamically why you don't use subGridUrl? You can load JSON data from the server directly instead of usage datatype: "local".

In any way if you prefer to load all the data from the server as once you can place all data for all subgrids in the server response. It looks like serviceMgr.loadInstructor has fnSuccess callback which will be called at the end of data loading and the res parameter of fnSuccess get the data returned from the server.

Currently you use data.instructors in both grid and subgrid. You can format the data so that data.subgridData[rowid] will get you the subgrid data for the row with id attribute rowid. In the case you will need just replace the line

data: data.subjects,

in the subgrid to

data: data.subjects[row_id],
于 2012-06-06T07:54:00.617 に答える