Question

我正在尝试创建一个包含子网格的动态jqgrid。所以这意味着subgrid应该根据主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;    
};

这是servlet的代码

 @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;       
}
}

请告诉我如何根据数据库动态地根据主网格加载子网格中的数据

Answer 1

如果您需要在子网格中动态加载数据，为什么不使用subGridUrl？您可以直接从服务器加载JSON数据，而不是使用datatype: "local"。

以任何方式，如果您希望从服务器加载所有数据，就像在服务器响应中放置所有子网格的所有数据一样。看起来serviceMgr.loadInstructor具有fnSuccess回调，将在数据加载结束时调用，res参数fnSuccess获取从服务器返回的数据。

目前，您在网格和子网格中都使用data.instructors。您可以格式化数据，以便data.subgridData[rowid]获取具有id属性rowid的行的子网格数据。如果您需要更换线

data: data.subjects,

在子网格中

data: data.subjects[row_id],

Jquery：在jqgrid中动态加载子网格

1 个答案: