jqgrid没有显示数据行

时间:2016-04-02 00:37:02

标签: jquery json jqgrid

当我尝试加载jqgrid时,它会显示标题,但不会添加包含数据的任何行。 这里的图片链接 - > Image of problem I am having

控制器

package mobilesuits

import grails.converters.JSON
import static org.springframework.http.HttpStatus.*
import grails.transaction.Transactional

@Transactional(readOnly = true)
class MobileSuitsController {

def scaffold = MobileSuits
/**
 * This function renders the json for the listGrid displayed on the home page
 * "listAllComicBook" corresponds to the url supplied in jqgrid
 * The first 5 lines are boiler plate found on all(i think) DCmd jqgrids
 * The create criteria creates a corresponding sql table of the comic book attributes
 *      The if statements inside the create criteria allow for searching in at the top of each column
 * The ' '  in the collection corresponds to the editing action for a row on the grid -- the little pin widget
 *
 */

def listAllMobileSuits = {
    def sortIndex = params.sidx ?: 'name'
    def sortOrder = params.sord ?: 'asc'
    def maxRows = Integer.valueOf(params.rows)
    def currentPage = Integer.valueOf(params.page) ?:1
    def rowOffset = currentPage == 1 ? 0 : (currentPage -1) * maxRows
    def mobilesuits = MobileSuits.createCriteria().list(max: maxRows, offset: rowOffset){
        if (params.name) ilike('name', "%${params.name}%")
        if (params.model) ilike('model', "%${params.model}%")
        if (params.affiliation) ilike('affiliation', "%${params.affiliation}%")
        if (params.pilot) ilike('pilot', "%${params.pilot}%")
    }
    def totalRows = mobilesuits.totalCount
    def numberOfPages = Math.ceil(totalRows / maxRows)
    //the first attribute in the collection is for the edit feature action thing
    def results = mobilesuits?.collect{[cell: ['', it.name, it.model, it.affiliation, it.pilot], id: it.id]}
    def jsonData = [rows: results, page: currentPage, records: totalRows, total: numberOfPages]
    render jsonData as JSON
}

/**
 * This function allows for the editing of a row in the jqgrid
 * "editAllComicBook" corresponds to the edit URL in the jqgrid
 * Whether the attribute is editable or not depends on how you initialize the editable field for the attribute in ColModel in jqgrid
 */
def editAllMobileSuits = {
    def item = null
    def message = ""
    def state = "FAIL"
    def id


    params.theObject = MobileSuits.get(params.id)

    if(params.name)
        params.theObject.name = params.name
    if(params.model)
        params.theObject.model = params.model
    if(params.affiliation)
        params.theObject.affiliaiton = params.affiliation
    if(params.pilot)
        params.theObject.pilot = params.pilot


    if (! params.theObject.hasErrors() && params.theObject.save()) {
        id = params.theObject.id
        state = "OK"
    }
    def response = [state:state,id:id]
    render response as JSON

  }
}

查看

<script type="text/javascript">
    $(document).ready(function() {//code goes here
    jQuery("#allMobileSuits").jqGrid({
        heigth: 'auto',
        width: 'auto',
        caption: 'Mobile Suits List',
        url: 'MobileSuits/mobileSuits',
        editurl: 'MobileSuits/editAllMobileSuits',
        datatype: "json",
        colNames: ['Name', 'Model', 'Affiliation', 'Pilot'],
        colModel: [
            //the actions column corresponds to the editurl
          /* {name:'actions', index:'actions', editable:false,    required:false, sortable:false, search:false, width:40, fixed: true, frozen: true,
                formatter: 'actions', hidden:false, formatoptions: {
                afterSave: function(e) {
                    $("#allMobileSuits").trigger("reloadGrid");
                    setTimeout(function () {
                                $('#allMobileSuits').jqGrid('resetSelection');
                                $('#allMobileSuits').jqGrid('setSelection', e);
                            }, 200
                    );
                }
            }},*/
            {name:'name', width:200, editable:true},
            {name:'model', width:200, editable:true},
            {name:'affiliation', width:200, editable:true},
            {name:'pilot', width:200, editable:true}

        ],

        rowNum:20,
        rowList:[20,40,60],
        gridview: true,
        viewrecords: true,
        sortorder: "asc",
        autowidth:true,
       // scroll: true,
        forceFit:true,
        shrinkToFit: true,
        pager: '#mobileSuitsAllPager',
        scrollOffset:0,
        gridComplete: function() {
        }
    });
    jQuery("#allMobileSuits").jqGrid('navGrid','#mobileSuitsAllPager',{edit:false,add:false,del:false});


    %{-- function to allow for searching a column for some string--}%
    jQuery('#allMobileSuits').filterToolbar({id:'allMobileSuits', searchOnEnter:true});
    $("#allMobileSuits").jqGrid('navGrid','#mobileSuitsAllPager',{
                add:false,
                del:false,
                edit:false,
                refresh:false,
                refreshstate:"current",
                search:false
            },
            {},//edit options

            {recreateForm:true //since clearAfterAdd is trueby default, recreate the form so we re-establish value for parent id
            });

    %{--Not sure what exactly this does--}%
    jQuery("#grid_id").jqGrid({

        pager : '#allMobileSuitsPager',

    });
    %{--Not sure what exactly this does--}%
    jQuery("#grid_id").navGrid('#allMobileSuitsPager',"add_allMobileSuits" );



    jQuery(window).bind('resize', function() {

    }).trigger('resize');
});



</script>


%{--tag for grid--}%
<table id="allMobileSuits"></table>
%{--tag for pager--}%
<div id="mobileSuitsAllPager"></div>

我不确定我的控制器或视图中是否存在问题,以确定无法看到我添加到网格中的数据的原因。

1 个答案:

答案 0 :(得分:0)

找出数据未显示的原因。这是我的url和editUrl行。我认为那是我想要数据的网址,而是将其替换为listAllMobileSuits for url和editAllMobileSuits for editURl,它们是列表的函数名称,并编辑我控制器中的网格。

转过来

url: 'MobileSuits/mobileSuits',
editurl: 'MobileSuits/editAllMobileSuits',

url: 'listAllMobileSuits',
editurl: 'editAllMobileSuits',