单击列标题时,向表中添加排序选项

时间:2012-10-18 10:24:29

标签: javascript jquery jqgrid

My grid table

单击列标题时为表添加排序选项,为其发布代码。

colNames: ['Incident key', 'Date', 'State', 'Incident no', 'FF death', 'OTH death', 'Property Loss', 'Cont Loss', 'Fire Cause'],
        colModel :[ 
        {
            name:'a.INC_KEY', 
            index:'a.INC_KEY',
            width: 220,
            hidden: true,
            editrules: {
                edithidden:true
            },
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        }, 

        {
            name:'a.INC_DATE', 
            index:'a.INC_DATE',
            width: 100,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        }, 

        {
            name:'a.INC_NO', 
            index:'a.INC_NO',
            width: 100,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        }, 

        {
            name:'a.STATE', 
            index:'a.STATE',
            width: 100,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        }, 

        {
            name:'a.FF_DEATH', 
            index:'a.FF_DEATH',
            width: 80,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        }, 

        {
            name:'a.OTH_DEATH', 
            index:'a.OTH_DEATH',
            width:80,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        },

        {
            name:'a.PROP_LOSS', 
            index:'a.PROP_LOSS',
            width: 80,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        },

        {
            name:'a.CONT_LOSS', 
            index:'a.CONT_LOSS',
            width: 80,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        },

        {
            name:'a.CAUSE_CODE_DESC', 
            index:'a.CAUSE_CODE_DESC',
            width: 240,
            searchoptions: {
                sopt: ['eq', 'ne','cn']
            }
        },
        ],
        pager: '#pager',
        rowNum: 500,
        rowList:[500,100,20],
        sortname: 'INC_KEY',
        sortorder: 'desc',
        viewrecords: true,
        sortable: true,
        height: 400,
        width: 800, 
        shrinkToFit: false,
        gridview: true,
        caption: 'Reports'
    });

    jQuery("#list1").jqGrid('navGrid','#pager',{
        edit:false,
        add:false,
        del:false
    });

3 个答案:

答案 0 :(得分:1)

有几个可用的插件,其中一个是数据表,(只需要2行编码!最适合你)

以下是一个示例链接

http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html

答案 1 :(得分:1)

您应该使用某些列的name属性值作为sortname的值。您当前的代码使用sortname: 'INC_KEY',但colModel中没有相应名称的列。您应该使用sortname: 'a.INC_KEY'代替。

此外,我建议您重命名所有列,使其名称中没有.。您应该了解name属性将用于在网格中构建一些id值,并将在selectors中使用。使用没有任何特殊字符的名称将降低您有一些奇怪的副作用的风险,并且jqGrid的某些功能将不会像预期的那样工作。如果您有远程datatype"json""xml"),则可以使用index前缀为a.的{​​{1}},但name前缀不应该{{1}} 1}}属性。

答案 2 :(得分:0)

我认为您正在使用JQGrid,我认为此代码可以帮助您

jQuery(function() {
        $("#list1").jqGrid({
            url:'file1.php',
            datatype: 'json',
            colNames:['Member Name','Administrstor Name' ,'Time', 'Status','Mobile'],
            colModel :[ 
                {name:'memberid', index:'memberid',align:'left',width: 142,searchoptions: { sopt: ['eq', 'ne','cn']}}, 
                {name:'adminid', index:'adminid',align:'left',search: false,width: 142}, 
                {name:'sendon', index:'senton',width: 167,searchoptions: { sopt: ['eq', 'ne','cn']}}, 
                {name:'status', index:'status',width: 117,search: false},
                {name:'mobile', index:'mobile',width: 162,search: false}
            ],
            pager: '#pager',
            rowNum: 5,
            rowList:[5,10],
            sortname: 'id',
            sortorder: 'desc',
            viewrecords: true,
            height: 'auto',
            width: 790, 
            shrinkToFit: false,
            rownumbers: true,
            gridview: true,
            caption: 'Message Sent Today'
        });
        jQuery("#list1").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});

    });