55面试教程网 jQuery EasyUI 技术教程
jQuery EasyUI 技术教程
jQuery EasyUI 教程jQuery EasyUI 简介jQuery EasyUI 应用 – 创建 CRUD 应用jQuery EasyUI 应用 – 创建 CRUD 数据网格jQuery EasyUI 应用 – 创建展开行明细编辑表单的 CRUD 应用jQuery EasyUI 应用 – 创建 RSS Feed 阅读器jQuery EasyUI 拖放 – 基本的拖动和放置jQuery EasyUI 拖放 – 创建拖放的购物车jQuery EasyUI 拖放 – 创建学校课程表jQuery EasyUI 菜单与按钮 – 创建简单的菜单jQuery EasyUI 菜单与按钮 – 创建链接按钮jQuery EasyUI 菜单与按钮 – 创建菜单按钮jQuery EasyUI 菜单与按钮 – 创建分割按钮jQuery EasyUI 布局 – 为网页创建边框布局jQuery EasyUI 布局 – 在面板中创建复杂布局jQuery EasyUI 布局 – 创建折叠面板jQuery EasyUI 布局 – 创建标签页(Tabs)jQuery EasyUI 布局 – 动态添加标签页(Tabs)jQuery EasyUI 布局 – 添加自动播放标签页(Tabs)jQuery EasyUI 布局 – 创建 XP 风格左侧面板jQuery EasyUI 数据网格 – 转换 HTML 表格为数据网格jQuery EasyUI 数据网格 – 取得选中行数据jQuery EasyUI 数据网格 – 添加查询功能jQuery EasyUI 数据网格 – 添加工具栏jQuery EasyUI 数据网格 – 创建复杂工具栏jQuery EasyUI 数据网格 – 设置冻结列jQuery EasyUI 数据网格 – 动态改变列jQuery EasyUI 数据网格 – 格式化列jQuery EasyUI 数据网格 – 设置排序jQuery EasyUI 数据网格 – 自定义排序jQuery EasyUI 数据网格 – 创建列组合jQuery EasyUI 数据网格 – 添加复选框jQuery EasyUI 数据网格 – 自定义分页jQuery EasyUI 数据网格 – 启用行内编辑jQuery EasyUI 数据网格 – 扩展编辑器jQuery EasyUI 数据网格 – 列运算jQuery EasyUI 数据网格 – 合并单元格jQuery EasyUI 数据网格 – 创建自定义视图jQuery EasyUI 数据网格 – 创建页脚摘要jQuery EasyUI 数据网格 – 条件设置行背景颜色jQuery EasyUI 数据网格 – 创建属性网格jQuery EasyUI 数据网格 – 扩展行显示细节jQuery EasyUI 数据网格 – 创建子网格jQuery EasyUI 数据网格 – 使用虚拟滚动视图显示海量数据jQuery EasyUI 数据网格 – 添加分页组件jQuery EasyUI 窗口 – 自定义窗口工具栏jQuery EasyUI 窗口 – 窗口与布局jQuery EasyUI 窗口 – 创建对话框jQuery EasyUI 窗口 – 自定义带有工具条和按钮的对话框jQuery EasyUI 树形菜单 – 使用标记创建树形菜单jQuery EasyUI 树形菜单 – 创建异步树形菜单jQuery EasyUI 树形菜单 – 树形菜单添加节点jQuery EasyUI 树形菜单 – 创建带复选框的树形菜单jQuery EasyUI 树形菜单 – 树形菜单拖放控制jQuery EasyUI 树形菜单 – 树形菜单加载父/子节点jQuery EasyUI 树形菜单 – 创建基础树形网格jQuery EasyUI 树形菜单 – 创建复杂树形网格jQuery EasyUI 树形菜单 – 树形网格动态加载jQuery EasyUI 树形菜单 – 树形网格添加分页jQuery EasyUI 树形菜单 – 树形网格惰性加载节点jQuery EasyUI 表单 – 创建异步提交表单jQuery EasyUI 表单 – 表单验证jQuery EasyUI 表单 – 创建树形下拉框(ComboTree)jQuery EasyUI 表单 – 格式化下拉框(ComboBox)jQuery EasyUI 表单 – 过滤下拉数据网格(ComboGrid)jQuery EasyUI 插件jQuery EasyUI 扩展

jQuery EasyUI 数据网格 – 添加查询功能

jQuery EasyUI 数据网格 - 添加查询功能

本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中。然后演示如何根据用户输入的搜索关键词搜寻显示结果。

创建数据网格(DataGrid)

创建带有分页功能的数据网格(datagrid),然后添加工具栏到其中。

    <table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
            url="datagrid24_getdata.php" toolbar="#tb"
            title="Load Data" iconCls="icon-save"
            rownumbers="true" pagination="true">
        <thead>
            <tr>
                <th field="itemid" width="80">Item ID</th>
                <th field="productid" width="80">Product ID</th>
                <th field="listprice" width="80" align="right">List Price</th>
                <th field="unitcost" width="80" align="right">Unit Cost</th>
                <th field="attr1" width="150">Attribute</th>
                <th field="status" width="60" align="center">Stauts</th>
            </tr>
        </thead>
    </table>

工具栏定义如下:

    <div id="tb" style="padding:3px">
        <span>Item ID:</span>
        <input id="itemid" style="line-height:26px;border:1px solid #ccc">
        <span>Product ID:</span>
        <input id="productid" style="line-height:26px;border:1px solid #ccc">
        <a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()">Search</a>
    </div>

当用户输入查询值并按下查询按钮时,'doSearch' 函数将被调用:

    function doSearch(){
        $('#tt').datagrid('load',{
            itemid: $('#itemid').val(),
            productid: $('#productid').val()
        });
    }

上面的代码调用了 'load' 方法来加载新的数据网格(datagrid)数据。我们需要传递 'itemid' 和 'productid' 参数到服务器。

服务器端代码

    include 'conn.php';
    
    $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
    $itemid = isset($_POST['itemid']) ? mysql_real_escape_string($_POST['itemid']) : '';
    $productid = isset($_POST['productid']) ? mysql_real_escape_string($_POST['productid']) : '';
    
    $offset = ($page-1)*$rows;
    
    $result = array();
    
    $where = "itemid like '$itemid%' and productid like '$productid%'";
    $rs = mysql_query("select count(*) from item where " . $where);
    $row = mysql_fetch_row($rs);
    $result["total"] = $row[0];
    
    $rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");
    
    $items = array();
    while($row = mysql_fetch_object($rs)){
        array_push($items, $row);
    }
    $result["rows"] = $items;
    
    echo json_encode($result);

下载 jQuery EasyUI 实例

jeasyui-datagrid-datagrid24.zip