單擊列標題時，將排序選項添加到表中

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只需要兩行編碼！最適合您）

以下是示例鏈接，

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

Answer 2

您應該將某列的name屬性中的值sortname的值。 您當前的代碼使用sortname: 'INC_KEY' ，但是colModel中沒有對應名稱的列。 您應該使用sortname: 'a.INC_KEY'代替。

此外，我建議您將所有列重命名為no . 在名稱中。 您應該了解， name屬性將用於在網格中構造一些id值，並將在選擇器中使用 。 使用不帶任何特殊字符的名稱將減少出現一些奇怪的副作用，並且jqGrid的某些功能無法正常工作的風險。 如果您具有遠程datatype （ "json"或"xml" ），則可以使用具有a. index a. 前綴，但您不應在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});

    });