jqgrid:排序时不调用unformat_Jqgrid

jqgrid:排序时不调用unformat

jqgrid

jqgrid:排序时不调用unformat,jqgrid,Jqgrid,根据jqGrid文档，如果在colOptions中提供自定义格式化程序，还应该提供一个“unformat”键，该键在排序操作期间被调用。但是，我没有看到这种情况发生，即未格式化函数没有被调用。下面是一个非常简单的例子： <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script> <script type="text/javascr

根据jqGrid文档，如果在colOptions中提供自定义格式化程序，还应该提供一个“unformat”键，该键在排序操作期间被调用。但是，我没有看到这种情况发生，即未格式化函数没有被调用。下面是一个非常简单的例子：

    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <style type="text/css" media="screen">
        th.ui-th-column div{
            white-space:normal !important;
            height:auto !important;
            padding:2px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            createGrid();
        });
        function createGrid() {
            $("#jqgrid-table").jqGrid({
                colNames:['First<br/>Name', 'Last Name', 'Age', 'Salary', 'Type'],
                colModel:[
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'age', index:'age', width:50},
                    {name:'salary', index: 'salary', width:50, sortable:true, formatter: salary_formatter, unformat:unformat_salary},
                    {name:'type', index:'type', width: 56}
                ],
                width: 800,
                datatype:'local',                   
                pager: '#pager2',
                viewrecords: true,
                caption:"JSON Example"
            });
            var searchOptions = {
                caption: 'Filter...',
                multipleSearch:true,
                closeAfterSearch:true,
                closeAfterReset:true,
                Find: 'Filter'
            };                
            jQuery("#jqgrid-table").jqGrid('navGrid',
                                    '#pager2', 
                                    {search:true, edit:false, add:false, del:false, refresh:false}, 
                                    null, null, null, searchOptions
                                    );
            var data = getData();
            for(var i =0; i < data.length; i++) {
                var r = data[i];
                jQuery("#jqgrid-table").addRowData(r.id, r);
            }
        }

        function getData() {
            return [
                   {id:1, firstName: 'John', lastName: 'XXX',  age:'30',  salary:'1500', type: 'Nice'},
                   {id:2, firstName: 'Ashley', lastName:'YYY', age:'31',  salary:'1300', type:'Nicer'},
                   {id:3, firstName:'Smith', lastName:'ZZZ', age:'23',    salary:'1301', type:'Nicest'},
                   {id:4, firstName:'Sarah', lastName:'Aster', age:'45',  salary:'530',  type:'Nicest'},
                   {id:5, firstName:'Michelle', lastName:'Crazy', age:'30', salary:'1423', type:'Nicest'}
            ];
        }

        function salary_formatter(cellvalue) {
            return cellvalue.replace(/^(\d\d)/,'$1,');
        }

        function unformat_salary(cellvalue) {
            console.log('U : ' + cellvalue); // THIS DOES NOT GET CALLED !
            return Number(cellvalue.replace(/,/g,''));
        }
    </script>
    </head>
    <body>
      <div id='jqgrid-div'>
          <table id='jqgrid-table'></table>
         <div id="pager2"></div>
      </div>
    </body>
    </html>

如您所见，从未调用过unformat_salary函数中的console.log行。甚至当你点击工资标题进行排序时。排序似乎有效，但它是按词汇排序的，我想要一个自定义排序。提供“sorttype”作为函数可以满足我的要求，但我想知道，当文档明确说明在排序操作期间调用了unformat时，为什么不调用它

    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <style type="text/css" media="screen">
        th.ui-th-column div{
            white-space:normal !important;
            height:auto !important;
            padding:2px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            createGrid();
        });
        function createGrid() {
            $("#jqgrid-table").jqGrid({
                colNames:['First<br/>Name', 'Last Name', 'Age', 'Salary', 'Type'],
                colModel:[
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'age', index:'age', width:50},
                    {name:'salary', index: 'salary', width:50, sortable:true, formatter: salary_formatter, unformat:unformat_salary},
                    {name:'type', index:'type', width: 56}
                ],
                width: 800,
                datatype:'local',                   
                pager: '#pager2',
                viewrecords: true,
                caption:"JSON Example"
            });
            var searchOptions = {
                caption: 'Filter...',
                multipleSearch:true,
                closeAfterSearch:true,
                closeAfterReset:true,
                Find: 'Filter'
            };                
            jQuery("#jqgrid-table").jqGrid('navGrid',
                                    '#pager2', 
                                    {search:true, edit:false, add:false, del:false, refresh:false}, 
                                    null, null, null, searchOptions
                                    );
            var data = getData();
            for(var i =0; i < data.length; i++) {
                var r = data[i];
                jQuery("#jqgrid-table").addRowData(r.id, r);
            }
        }

        function getData() {
            return [
                   {id:1, firstName: 'John', lastName: 'XXX',  age:'30',  salary:'1500', type: 'Nice'},
                   {id:2, firstName: 'Ashley', lastName:'YYY', age:'31',  salary:'1300', type:'Nicer'},
                   {id:3, firstName:'Smith', lastName:'ZZZ', age:'23',    salary:'1301', type:'Nicest'},
                   {id:4, firstName:'Sarah', lastName:'Aster', age:'45',  salary:'530',  type:'Nicest'},
                   {id:5, firstName:'Michelle', lastName:'Crazy', age:'30', salary:'1423', type:'Nicest'}
            ];
        }

        function salary_formatter(cellvalue) {
            return cellvalue.replace(/^(\d\d)/,'$1,');
        }

        function unformat_salary(cellvalue) {
            console.log('U : ' + cellvalue); // THIS DOES NOT GET CALLED !
            return Number(cellvalue.replace(/,/g,''));
        }
    </script>
    </head>
    <body>
      <div id='jqgrid-div'>
          <table id='jqgrid-table'></table>
         <div id="pager2"></div>
      </div>
    </body>
    </html>

JQGRID测试

    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <style type="text/css" media="screen">
        th.ui-th-column div{
            white-space:normal !important;
            height:auto !important;
            padding:2px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            createGrid();
        });
        function createGrid() {
            $("#jqgrid-table").jqGrid({
                colNames:['First<br/>Name', 'Last Name', 'Age', 'Salary', 'Type'],
                colModel:[
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'age', index:'age', width:50},
                    {name:'salary', index: 'salary', width:50, sortable:true, formatter: salary_formatter, unformat:unformat_salary},
                    {name:'type', index:'type', width: 56}
                ],
                width: 800,
                datatype:'local',                   
                pager: '#pager2',
                viewrecords: true,
                caption:"JSON Example"
            });
            var searchOptions = {
                caption: 'Filter...',
                multipleSearch:true,
                closeAfterSearch:true,
                closeAfterReset:true,
                Find: 'Filter'
            };                
            jQuery("#jqgrid-table").jqGrid('navGrid',
                                    '#pager2', 
                                    {search:true, edit:false, add:false, del:false, refresh:false}, 
                                    null, null, null, searchOptions
                                    );
            var data = getData();
            for(var i =0; i < data.length; i++) {
                var r = data[i];
                jQuery("#jqgrid-table").addRowData(r.id, r);
            }
        }

        function getData() {
            return [
                   {id:1, firstName: 'John', lastName: 'XXX',  age:'30',  salary:'1500', type: 'Nice'},
                   {id:2, firstName: 'Ashley', lastName:'YYY', age:'31',  salary:'1300', type:'Nicer'},
                   {id:3, firstName:'Smith', lastName:'ZZZ', age:'23',    salary:'1301', type:'Nicest'},
                   {id:4, firstName:'Sarah', lastName:'Aster', age:'45',  salary:'530',  type:'Nicest'},
                   {id:5, firstName:'Michelle', lastName:'Crazy', age:'30', salary:'1423', type:'Nicest'}
            ];
        }

        function salary_formatter(cellvalue) {
            return cellvalue.replace(/^(\d\d)/,'$1,');
        }

        function unformat_salary(cellvalue) {
            console.log('U : ' + cellvalue); // THIS DOES NOT GET CALLED !
            return Number(cellvalue.replace(/,/g,''));
        }
    </script>
    </head>
    <body>
      <div id='jqgrid-div'>
          <table id='jqgrid-table'></table>
         <div id="pager2"></div>
      </div>
    </body>
    </html>


th.ui-th列div{
空白：正常！重要；
高度：自动！重要；
填充：2px；
}
$（函数（）{
createGrid（）；
});
函数createGrid（）{
$（“#jqgrid表”）.jqgrid({
colNames:['First
Name'、'Last Name'、'Age'、'Salary'、'Type']，
colModel：[
{name:'firstName'，索引：'firstName'，宽度：100}，
{name:'lastName'，索引：'lastName'，宽度：100}，
{名称：'age'，索引：'age'，宽度：50}，
{name:'salary'，index:'salary'，width:50，sortable:true，formatter:salary\u formatter，unformat:unformat\u salary}，
{名称：'type'，索引：'type'，宽度：56}
],
宽度：800，
数据类型：'local'，
传呼机：“#第2页”，
viewrecords：是的，
标题：“JSON示例”
});
var搜索选项={
标题：“过滤器…”，
多重搜索：对，
closeAfterSearch：没错，
closeAfterReset：正确，
查找：“过滤器”
};                
jQuery（“#jqgrid table”）.jqgrid（'navGrid'，
“#第2页”，
{搜索：true，编辑：false，添加：false，删除：false，刷新：false}，
null，null，null，searchOptions
);
var data=getData（）；
对于（变量i=0；i

您误解了

unformat

函数的含义。仅当您获得单元格、行或列的包含时，它才会被保存。例如，如果使用

getCell

、

getRowData

、

getCol

或close。如果使用

数据类型：'local'

（如示例中所示），则属性将定义列的排序方式。在自定义排序的情况下，您可以使用。该函数可以有两个参数：

cellValue

和

rowData

。最后一个参数表示当前行中的非格式化数据

    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <style type="text/css" media="screen">
        th.ui-th-column div{
            white-space:normal !important;
            height:auto !important;
            padding:2px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            createGrid();
        });
        function createGrid() {
            $("#jqgrid-table").jqGrid({
                colNames:['First<br/>Name', 'Last Name', 'Age', 'Salary', 'Type'],
                colModel:[
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'age', index:'age', width:50},
                    {name:'salary', index: 'salary', width:50, sortable:true, formatter: salary_formatter, unformat:unformat_salary},
                    {name:'type', index:'type', width: 56}
                ],
                width: 800,
                datatype:'local',                   
                pager: '#pager2',
                viewrecords: true,
                caption:"JSON Example"
            });
            var searchOptions = {
                caption: 'Filter...',
                multipleSearch:true,
                closeAfterSearch:true,
                closeAfterReset:true,
                Find: 'Filter'
            };                
            jQuery("#jqgrid-table").jqGrid('navGrid',
                                    '#pager2', 
                                    {search:true, edit:false, add:false, del:false, refresh:false}, 
                                    null, null, null, searchOptions
                                    );
            var data = getData();
            for(var i =0; i < data.length; i++) {
                var r = data[i];
                jQuery("#jqgrid-table").addRowData(r.id, r);
            }
        }

        function getData() {
            return [
                   {id:1, firstName: 'John', lastName: 'XXX',  age:'30',  salary:'1500', type: 'Nice'},
                   {id:2, firstName: 'Ashley', lastName:'YYY', age:'31',  salary:'1300', type:'Nicer'},
                   {id:3, firstName:'Smith', lastName:'ZZZ', age:'23',    salary:'1301', type:'Nicest'},
                   {id:4, firstName:'Sarah', lastName:'Aster', age:'45',  salary:'530',  type:'Nicest'},
                   {id:5, firstName:'Michelle', lastName:'Crazy', age:'30', salary:'1423', type:'Nicest'}
            ];
        }

        function salary_formatter(cellvalue) {
            return cellvalue.replace(/^(\d\d)/,'$1,');
        }

        function unformat_salary(cellvalue) {
            console.log('U : ' + cellvalue); // THIS DOES NOT GET CALLED !
            return Number(cellvalue.replace(/,/g,''));
        }
    </script>
    </head>
    <body>
      <div id='jqgrid-div'>
          <table id='jqgrid-table'></table>
         <div id="pager2"></div>
      </div>
    </body>
    </html>

在您的情况下，您可以使用

    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <style type="text/css" media="screen">
        th.ui-th-column div{
            white-space:normal !important;
            height:auto !important;
            padding:2px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            createGrid();
        });
        function createGrid() {
            $("#jqgrid-table").jqGrid({
                colNames:['First<br/>Name', 'Last Name', 'Age', 'Salary', 'Type'],
                colModel:[
                    {name:'firstName',index:'firstName', width:100},
                    {name:'lastName',index:'lastName', width:100},
                    {name:'age', index:'age', width:50},
                    {name:'salary', index: 'salary', width:50, sortable:true, formatter: salary_formatter, unformat:unformat_salary},
                    {name:'type', index:'type', width: 56}
                ],
                width: 800,
                datatype:'local',                   
                pager: '#pager2',
                viewrecords: true,
                caption:"JSON Example"
            });
            var searchOptions = {
                caption: 'Filter...',
                multipleSearch:true,
                closeAfterSearch:true,
                closeAfterReset:true,
                Find: 'Filter'
            };                
            jQuery("#jqgrid-table").jqGrid('navGrid',
                                    '#pager2', 
                                    {search:true, edit:false, add:false, del:false, refresh:false}, 
                                    null, null, null, searchOptions
                                    );
            var data = getData();
            for(var i =0; i < data.length; i++) {
                var r = data[i];
                jQuery("#jqgrid-table").addRowData(r.id, r);
            }
        }

        function getData() {
            return [
                   {id:1, firstName: 'John', lastName: 'XXX',  age:'30',  salary:'1500', type: 'Nice'},
                   {id:2, firstName: 'Ashley', lastName:'YYY', age:'31',  salary:'1300', type:'Nicer'},
                   {id:3, firstName:'Smith', lastName:'ZZZ', age:'23',    salary:'1301', type:'Nicest'},
                   {id:4, firstName:'Sarah', lastName:'Aster', age:'45',  salary:'530',  type:'Nicest'},
                   {id:5, firstName:'Michelle', lastName:'Crazy', age:'30', salary:'1423', type:'Nicest'}
            ];
        }

        function salary_formatter(cellvalue) {
            return cellvalue.replace(/^(\d\d)/,'$1,');
        }

        function unformat_salary(cellvalue) {
            console.log('U : ' + cellvalue); // THIS DOES NOT GET CALLED !
            return Number(cellvalue.replace(/,/g,''));
        }
    </script>
    </head>
    <body>
      <div id='jqgrid-div'>
          <table id='jqgrid-table'></table>
         <div id="pager2"></div>
      </div>
    </body>
    </html>

sorttype:function(cellvalue){
    return unformat_salary(cellvalue);
}