jQuery EasyUI使用教程之过滤ComboGrid

最新推荐文章于 2023-05-16 08:44:02 发布

界面开发小八哥

最新推荐文章于 2023-05-16 08:44:02 发布

阅读量1.2k

点赞数

Combogrid组件和Combobox组件的共同点是,除了都具有下拉面板以外，它们都是基于数据网格的。Combogrid组件可以过滤、分页，并具有其他一些数据网格的功能。本教程向您展示如何在一个Combogrid组件中过滤数据记录。

jQuery EasyUI最新试用版下载请猛戳>>

点击查看示例

创建Combogrid

 
   
        < 
        input 
         id 
        = 
        "cg" 
         style 
        = 
        "width:150px" 
        > 
       
 
 

 
   
        $( 
        '#cg' 
        ).combogrid({ 
       
 
        panelWidth:500, 
       
 
        url:  
        'form5_getdata.php' 
        , 
       
 
        idField: 
        'itemid' 
        , 
       
 
        textField: 
        'productid' 
        , 
       
 
        mode: 
        'remote' 
        , 
       
 
        fitColumns: 
        true 
        , 
       
 
        columns:[[ 
       
 
        {field: 
        'itemid' 
        ,title: 
        'Item ID' 
        ,width:60}, 
       
 
        {field: 
        'productid' 
        ,title: 
        'Product ID' 
        ,align: 
        'right' 
        ,width:80}, 
       
 
        {field: 
        'listprice' 
        ,title: 
        'List Price' 
        ,align: 
        'right' 
        ,width:60}, 
       
 
        {field: 
        'unitcost' 
        ,title: 
        'Unit Cost' 
        ,align: 
        'right' 
        ,width:60}, 
       
 
        {field: 
        'attr1' 
        ,title: 
        'Attribute' 
        ,width:150}, 
       
 
        {field: 
        'status' 
        ,title: 
        'Stauts' 
        ,align: 
        'center' 
        ,width:60} 
       
 
        ]] 
       
 
        }); 
       
 
 

Combogrid组件应该定义'idField'和'textField'属性。 'idField'属性存储组件值，'textField'属性在input文本框中显示文本消息。Combogrid组件可以以'local'或'remote'模式过滤记录。在远程模式中，当用户输入字符到input文本框中，Combogrid将发送 'q' 参数到远程服务器。

服务器代码

form5_getdata.php

 
   
        $q 
         = isset( 
        $_POST 
        [ 
        'q' 
        ]) ?  
        strval 
        ( 
        $_POST 
        [ 
        'q' 
        ]) :  
        '' 
        ; 
       

           
       
 
        include 
         'conn.php' 
        ; 
       

           
       
 
        $rs 
         = mysql_query( 
        "select * from item where itemid like '%$q%' or productid like '%$q%'" 
        ); 
       
 
        $rows 
         =  
        array 
        (); 
       
 
        while 
        ( 
        $row 
         = mysql_fetch_assoc( 
        $rs 
        )){ 
       
 
        $rows 
        [] =  
        $row 
        ; 
       
 
        } 
       
 
        echo 
         json_encode( 
        $rows 
        ); 
       
 
 