jqgrid - 搜索工具栏

时间:2011-12-20 15:21:46

标签: jqgrid

3.7节下的工具栏搜索演示为每列绘制了搜索工具栏。是否可以只有一个搜索工具栏来过滤所有列和所有页面的数据?

了解更多信息:jqGrid filtering on the client-side using "filterToolbar"

JSON

{
   "mypage":{
      "outerwrapper":{
         "page":"1",
         "total":"2",
         "records":"2",
         "innerwrapper":{
            "rows":[
               {
                  "id":"1",
                  "cells": [
                     {
                         "fieldType": "image",
                         "label": "image",
                         "value": "<img src=icon.gif>"                         
                     },
                     {
                         "fieldType": "number",
                         "label": "number",
                         "value": 100
                     },
                     {
                        "fieldType": "string",
                        "label": "string",
                        "value": "James Kisnar"
                     },
                     {
                        "fieldType": "alphanumeric",
                        "label": "alphanumeric",
                        "value": "77 Wall Street"
                     },
                     {
                        "fieldType": "date",
                        "label": "date",
                        "value": "12/20/2011"
                     },
                     {
                        "fieldType": "decimal",
                        "label": "decimal",
                        "value": "23.55"
                     }
                  ]
               },
               {
                  "id":"2",
                  "cells": [
                     {
                         "fieldType": "image",
                         "label": "image",
                         "value": "<img src=icon.gif>"                         
                     },
                     {
                         "fieldType": "number",
                         "label": "number",
                         "value": 140
                     },
                     {
                        "fieldType": "string",
                        "label": "string",
                        "value": "James Kitchener"
                     },
                     {
                        "fieldType": "alphanumeric",
                        "label": "alphanumeric",
                        "value": "123 ABC"
                     },
                     {
                        "fieldType": "date",
                        "label": "date",
                        "value": "12/20/2011"
                     },
                     {
                        "fieldType": "decimal",
                        "label": "decimal",
                        "value": "23.55"
                     }
                  ]
               }, 
               {
                  "id":"3",
                  "cells": [
                     {
                         "fieldType": "image",
                         "label": "image",
                         "value": "<img src=icon.gif>"                         
                     },
                     {
                         "fieldType": "number",
                         "label": "number",
                         "value": 657
                     },
                     {
                        "fieldType": "string",
                        "label": "string",
                        "value": "Loo Gatner"
                     },
                     {
                        "fieldType": "alphanumeric",
                        "label": "alphanumeric",
                        "value": "123 XYZ"
                     },
                     {
                        "fieldType": "date",
                        "label": "date",
                        "value": "12/20/2011"
                     },
                     {
                        "fieldType": "decimal",
                        "label": "decimal",
                        "value": "23.55"
                     }
                  ]
               }, 
               {
                  "id":"4",
                  "cells": [
                     {
                         "fieldType": "image",
                         "label": "image",
                         "value": "<img src=icon.gif>"                         
                     },
                     {
                         "fieldType": "number",
                         "label": "number",
                         "value": 1290
                     },
                     {
                        "fieldType": "string",
                        "label": "string",
                        "value": "William Parker"
                     },
                     {
                        "fieldType": "alphanumeric",
                        "label": "alphanumeric",
                        "value": "123 FGH"
                     },
                     {
                        "fieldType": "date",
                        "label": "date",
                        "value": "12/20/2011"
                     },
                     {
                        "fieldType": "decimal",
                        "label": "decimal",
                        "value": "23.55"
                     }
                  ]
               } 
            ]
         }
      }
   }
}

JQGrid定义

$(function (){
    var getValueByName = function (cells, cellItem) {
        var i, count = cells.length, item;
        for (i = 0; i < count; i += 1) {
            item = cells[i];
            if (item.label === cellItem) {
                return item.value;
            }
        }
        return '';
    };
    $("#myjqgrid").jqGrid({
        url: "jqgrid.json",
        datatype: "json",
        contentType: "application/x-javascript; charset=utf-8",
        colNames:['Image','Number', 'String', 'Alphanumeric','Date','Decimal'],
        colModel:[
            {name:'image',index:'image',jsonmap:function(obj){return getValueByName(obj.cells, "image");}, width:150, align:"center"},
            {name:'number',index:'number',jsonmap:function(obj){return getValueByName(obj.cells, "number");}, width:150, align:"left", sortable:true},
            {name:'string',index:'string',jsonmap:function(obj){return getValueByName(obj.cells, "string");}, width:150, align:"left", sortable:true},
            {name:'alphanumeric',index:'alphanumeric',jsonmap:function(obj){return getValueByName(obj.cells, "alphanumeric");}, width:200, align:"left", sortable:true},
            {name:'date',index:'date',jsonmap:function(obj){return getValueByName(obj.cells, "date");}, width:150,align:"left", sortable:true},
            {name:'decimal',index:'decimal',jsonmap:function(obj){return getValueByName(obj.cells, "decimal");}, width:150,align:"left", sortable:true},
        ],
        jsonReader: {
            root: "mypage.outerwrapper.innerwrapper.rows",          
            page: "mypage.outerwrapper.page",
            total: "mypage.outerwrapper.total",
            records: "mypage.outerwrapper.records",
            repeatitems: false
        },
        rowNum:2,
        rowList:[2, 4],
        pager: '#Pager',
        recordpos: 'left',
        multiboxonly:true,
        viewrecords: true,
        sortorder: "desc",
        multiselect: true,
        scrolloffset: 0,    
        loadonce: true,     
        sortable: true, 
        sorttype: "text",
        cache: true,
        height: "120px"
    });
    $("#myjqgrid").jqGrid('navGrid','#Pager',{add:false,del:false,edit:false,position:'right'});
    $("#myjqgrid").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
});

0 个答案:

没有答案