javascript - 单击列标题时向表格添加排序选项

Question

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

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

Answer 1

有几个插件可用，其中一个是数据表，（ut只需要2行编码！最适合你）

以下是示例链接，

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

Answer 2

您应该使用name某个列的属性值作为 的值sortname。您当前的代码使用sortname: 'INC_KEY'，但没有colModel对应名称的列。你应该sortname: 'a.INC_KEY'改用。

此外，我建议您将所有列重命名.为名称中没有。您应该了解该name属性将用于id在网格中构造一些值，并将在选择器中使用。使用不带任何特殊字符的名称将降低您产生一些奇怪副作用的风险，并且 jqGrid 的某些功能将无法正常工作。如果你有 remote datatype( "json"or "xml") 你可以使用indexwhich has a.prefix ，但你不应该在name属性中有这样的前缀。

Answer 3

我认为您正在使用 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});

    });