EasyUI-DataGrid LoadData加载本地Jsion，并实现分页

已于 2022-04-29 10:54:32 修改
阅读量4.7k 收藏 5
点赞数
分类专栏： Javascript相关 文章标签： easyui xhtml 前端
于 2016-06-28 10:36:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010178767/article/details/51774024
版权 
不叨叨，先上代码：实际可用
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Net_LinerSearch.aspx.cs"
    Inherits="WDWeb.web.Net_LinerSearch" %>


<%@ Import Namespace="Tool" %>
<%@ Register Src="Net_ControlBottom.ascx" TagName="Net_ControlBottom" TagPrefix="uc1" %>
<%@ Register Src="Net_ControlTop.ascx" TagName="Net_ControlTop" TagPrefix="uc2" %>
<%@ Register Src="Net_ControlMenu.ascx" TagName="Net_ControlMenu" TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>网上服务系统</title>
    <link href="css_js/CSS.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css_js/themes/gray/easyui.css" />
    <link rel="stylesheet" type="text/css" href="css_js/themes/icon.css" />
    <link href="css_js/Pager.css" rel="stylesheet" type="text/css" />
    <script src="../css_js/jQuery.js" type="text/javascript"></script>
    <%--<script src="css_js/jquery-1.7.min.js" type="text/javascript"></script>--%>
    <script type="text/javascript" src="css_js/jquery.easyui.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="css_js/easyloader.js"></script>
    <script src="css_js/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script src="css_js/jquery.pager.js" type="text/javascript"></script>
    <script type="text/javascript" src="../css_js/layer/layer.min.js"></script>
    <script type="text/javascript">
        $(function () {


            SearchUNameMailInfo();
            SetTable(null);
        });
        //搜索数据信息
        function SearchUNameMailInfo() {
            //btnSerach，txtSerachName，txtSerachMail
            //按条件进行查询信息
            $("#img06").click(function () {
                if ($("#ddlIE").val() == "I") {
                    var queryData = "{ type:'" + $("#ddlIE").val() + "', enname: null, name:'" + $("#ddlStyles").val() + "', mainkey: null }";
                }
                else {
                    var queryData = "{ type:'" + $("#ddlIE").val() + "', enname: null, name:'" + $("#ddlStyles").val() + "', mainkey: null }'";


                }
                // console.log(queryData); //写入控制台查看
                initTable(queryData);
                return false;
            });
        }
        function initTable(querydata) { //***注意querydata参数的写法**：var queryData = "{ AppSetType:'Maerskimportedprecheck',billno:'" + $("#txtNo").val() + "',mainkey:" + null + "}";
            $.ajax({
                type: "POST", //访问WebService使用Post方式请求
                contentType: "application/json;charset=utf-8", //WebService 会返回Json类型
                url: "../GetJsonStr.asmx/GetShipJson", //获取数据的地址
                data: querydata, //参数
                dataType: 'json ',
                beforeSend: function (x) { x.setRequestHeader("Content-Type", "application/json; charset=utf-8"); },
                error: function (x, e) {
                    layer.alert(e.toString(), 0, "友好提醒");
                },
                success: function (data) {
                    var DataObj = $.parseJSON(data.d);
                    var daobj = DataObj.obj;
                    if (daobj != null) {
                        SetTable(daobj);
                    }
                    // $('#dt').datagrid({ loadFilter: SetTable }).datagrid('loadData', daobj);


                }
            });
        };




        //初始化表格
        function SetTable(data) {
            var dg = $("#dt");
            $(dg).datagrid({
                title: '船期信息查询', //标题
                iconCls: 'icon-view',
                border: true, //是否显示边框
                height: function () { return document.div.clientheight * 0.8 }, //面板高度
                //  height: 500,
                width: function () { return document.body.clientwidth * 0.9 }, //面板宽度
                // method: 'POST', //访问远程数据的方法，默认POST
                url: null, //获取数据的地址
                loadMsg: '数据加载中,请稍后……', //数据加载提示，默认"Processing,please wait …"。自定义覆盖。
                // idFiels: 'mainkey', //标识字段Key
                striped: true, //是否显示条纹（即奇偶行使用不同背景色）
                fit: false, //当true时，设置大小以适应它的父容器。默认false。
                fitColumns: true, //True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动。
                singleSelect: true, //是否只能选中一行数据
                rownumbers: true, //是否显示行号
                pagination: true, //是否显示分页工具栏
                nowrap: false, //是否在同一行显示数据
                pageNumber: 1, //初始化的页码编号,默认1
                pageSize: 10, //每页的数据条数，默认10
                pageList: [10, 20, 50, 100, 150, 200], //页面数据条数选择清单
                //sortName: 'date2', //要排序的列名
                //sortOrder: 'desc', //定义列的排列顺序，只能是'asc'或'desc'。默认asc。
                showFooter: true, //定义是否显示一行页脚
                // queryParams: queryData,  //异步查询的参数  
                data: data == null ? '' : data.slice(0, 10),
                columns: [[
                {
                    field: 'cnname', //关联字段
                    title: '船名', //列名
                    hidden: false,
                    align: 'center',
                    width: 150
                },
                  {
                      field: 'enname', //关联字段
                      title: '英文名', //列名
                      hidden: false,
                      align: 'center',
                      width: 180
                  },
                <span style="white-space:pre">				</span>  {
                <span style="white-space:pre">				</span>      field: 'voyagei', //关联字段
                <span style="white-space:pre">				</span>      title: '船次', //列名
                <span style="white-space:pre">				</span>      sortable: false, //当true时，允许该列进行排序
                <span style="white-space:pre">				</span>      hidden: false,
                <span style="white-space:pre">				</span>      align: 'center',
                <span style="white-space:pre">				</span>      width: 150,
                <span style="white-space:pre">				</span>      formatter: function (value, row, index) {


                <span style="white-space:pre">				</span>          var val = row['voyagei'] + '/' + row['voyagee'];
                <span style="white-space:pre">				</span>          return val;
                <span style="white-space:pre">				</span>      }
                <span style="white-space:pre">				</span>  },
                                  {
                                      field: 'custcname', //关联字段
                                      title: '关区', //列名
                                      sortable: false, //当true时，允许该列进行排序
                                      hidden: false,
                                      align: 'center',
                                      width: 120
                                  },
                                   {
                                       field: 'currberth1', //关联字段
                                       title: '泊位', //列名
                                       sortable: false, //当true时，允许该列进行排序
                                       // hidden: false,
                                       align: 'center',
                                       width: 150,
                                       formatter: function (value, row, index) {
                                           if (row['currberth'] != '预抵' && row['currberth'] != '离港') {


                                               return row['currberth'];


                                           }
                                           else {
                                               return '/';
                                           }
                                       }
                                   },
                <span style="white-space:pre">				</span>  {
                <span style="white-space:pre">				</span>      field: 'currberth', //关联字段
                <span style="white-space:pre">				</span>      title: '船舶状态', //列名
                <span style="white-space:pre">				</span>      sortable: false, //当true时，允许该列进行排序
                <span style="white-space:pre">				</span>      hidden: false,
                <span style="white-space:pre">				</span>      align: 'center',
                <span style="white-space:pre">				</span>      width: 100,
                <span style="white-space:pre">				</span>      formatter: function (value, row, index) {


                <span style="white-space:pre">				</span>          if (row['currberth'] == '预抵') {




                <span style="white-space:pre">				</span>              row['eta11'] = row['eta1'];
                <span style="white-space:pre">				</span>              row['eta12'] = '/';
                <span style="white-space:pre">				</span>              row['eta13'] = '/';
                <span style="white-space:pre">				</span>              return row['currberth'];
                <span style="white-space:pre">				</span>          }
                <span style="white-space:pre">				</span>          else if (row['currberth'] == '离港') {


                <span style="white-space:pre">				</span>              row['eta13'] = row['eta1'];
                <span style="white-space:pre">				</span>              row['eta12'] = '/';
                <span style="white-space:pre">				</span>              row['eta11'] = '/';
                <span style="white-space:pre">				</span>              return row['currberth'];
                <span style="white-space:pre">				</span>          } else {
                <span style="white-space:pre">				</span>              row['eta12'] = row['eta1'];
                <span style="white-space:pre">				</span>              row['eta13'] = '/';
                <span style="white-space:pre">				</span>              row['eta11'] = '/';
                <span style="white-space:pre">				</span>              return '/';
                <span style="white-space:pre">				</span>          }
                <span style="white-space:pre">				</span>      }




                <span style="white-space:pre">				</span>  },


                                   {
                                       field: 'eta11', //关联字段
                                       title: '预抵时间',
                                       sortable: false, //当true时，允许该列进行排序
                                       hidden: false,
                                       align: 'center',
                                       width: 200,
                                       formatter: function (value, row, index) {
                                           if (row['currberth'] == '预抵') {


                                               row['eta12'] = row['eta13'] = '/';


                                               row['eta11'] = row['eta1'];
                                               return row['eta11'];
                                           }
                                           else {
                                               //                                             


                                               return '/';
                                           }
                                       }


                                   },
                <span style="white-space:pre">				</span>  {
                <span style="white-space:pre">				</span>      field: 'eta12', //关联字段
                <span style="white-space:pre">				</span>      title: '靠泊时间',
                <span style="white-space:pre">				</span>      sortable: false, //当true时，允许该列进行排序
                <span style="white-space:pre">				</span>      hidden: false,
                <span style="white-space:pre">				</span>      align: 'center',
                <span style="white-space:pre">				</span>      width: 200,
                <span style="white-space:pre">				</span>      formatter: function (value, row, index) {
                <span style="white-space:pre">				</span>          if (row['currberth'] != '预抵' && row['currberth'] != '离港') {
                <span style="white-space:pre">				</span>               
                <span style="white-space:pre">				</span>              return row['eta1'];


                <span style="white-space:pre">				</span>          }
                <span style="white-space:pre">				</span>          else {
                <span style="white-space:pre">				</span>               
                <span style="white-space:pre">				</span>              return '/';
                <span style="white-space:pre">				</span>          }
                <span style="white-space:pre">				</span>      }
                <span style="white-space:pre">				</span>  },
                                  {
                                      field: 'eta13', //关联字段
                                      title: '离港时间',
                                      sortable: false, //当true时，允许该列进行排序
                                      hidden: false,
                                      align: 'center',
                                      width: 200,
                                      formatter: function (value, row, index) {


                                          if (row['currberth'] == '离港') {
                                              
                                              return row['eta1'];
                                          }
                                          else {
                                               
                                              return '/';
                                          }
                                      }


                                  },
                <span style="white-space:pre">				</span>  {
                <span style="white-space:pre">				</span>      field: 'cname', //关联字段
                <span style="white-space:pre">				</span>      title: '船公司', //列名
                <span style="white-space:pre">				</span>      sortable: false, //当true时，允许该列进行排序
                <span style="white-space:pre">				</span>      hidden: false,
                <span style="white-space:pre">				</span>      align: 'center',
                <span style="white-space:pre">				</span>      width: 360
                <span style="white-space:pre">				</span>  }
                ]]


            });


            if (data != null) {
                var pager = $(dg).datagrid("getPager");
                $(pager).pagination({
                    pageNumber: 1, //初始化的页码编号,默认1
                    pageSize: 10, //每页的数据条数，默认10
                    pageList: [10, 20, 50, 100, 150, 200], //页面数据条数选择清单
                    total: data.length,
                    onSelectPage: function (pageNo, pageSize) {
                        var start = (pageNo - 1) * pageSize;
                        var end = start + pageSize;
                        $(dg).datagrid("loadData", data.slice(start, end));
                        pager.pagination('refresh', {
                            total: data.length,
                            pageNumber: pageNo
                        });
                    }
                });


            }
        }


    </script>
    <script type="text/javascript">
        function DoShowChar(id) {
            $.layer({
                type: 2,
                shadeClose: false,
                title: "承运人详细信息",
                shade: [0.8, '#000'],
                border: [0],
                offset: ['20px', ''],
                area: ['800px', '400px'],
                iframe: { src: 'Net_LinerDetail.aspx?mkey=' + id }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <!--头部信息-->
    <uc2:Net_ControlTop ID="Net_ControlTop1" runat="server" />
    <div id="content">
        <div class="h02">
        </div>
        <!--功能菜单begin-->
        <uc3:Net_ControlMenu ID="Net_ControlMenu1" runat="server" ImgId="13" ImgSrc="images/img-01-2.png" />
        <!--功能菜单end-->
        <div id="content03">
            <div class="boat">
                <div class="h20">
                </div>
                <div>
                    <table>
                        <tr>
                            <td class="text03" width="950">
                                <img src="images/img-03.png" alt="" />
                                &nbsp;&nbsp;&nbsp;班轮船期查询 <a href="#"></a>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <img src="images/img-line.png" alt="" class="line" />
                            </td>
                        </tr>
                        <tr>
                            <td height="10">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tr>
                                        <td align="right">
                                            查询方式：
                                        </td>
                                        <td class="xx1">
                                            <asp:DropDownList ID="ddlIE" runat="server" AutoPostBack="TRUE" OnSelectedIndexChanged="ddlIE_SelectedIndexChanged">
                                                <asp:ListItem Value="I" Text="日期"></asp:ListItem>
                                                <asp:ListItem Value="E" Text="船名"></asp:ListItem>
                                            </asp:DropDownList>
                                        </td>
                                        <td align="right" height="50" class="xx1" style="margin-right: 5px">
                                            <div id="DIVDate" runat="server" visible="true">
                                                <ul>
                                                    <li style="list-style: none; float: left; font-size: 16px;">船舶状态：</li>
                                                    <li style="list-style: none; float: left; font-size: 16px;">
                                                        <asp:DropDownList ID="ddlStyles" runat="server" AutoPostBack="TRUE" OnSelectedIndexChanged="ddlStyles_SelectedIndexChanged">
                                                            <asp:ListItem Value="y" Text="预抵"></asp:ListItem>
                                                            <asp:ListItem Value="z" Text="在港"></asp:ListItem>
                                                            <asp:ListItem Value="l" Text="离港"></asp:ListItem>
                                                        </asp:DropDownList>
                                                    </li>
                                                    <li runat="server" id="liLI" visible="false" style="list-style: none; float: left;
                                                        font-size: 16px; margin-right: 1px">离港日期:
                                                        <asp:TextBox ID="txtStart" runat="server" onfocus="WdatePicker({readOnly:true,isShowClear:false})"></asp:TextBox>
                                                        至
                                                        <asp:TextBox ID="txtEnd" runat="server" onfocus="WdatePicker({readOnly:true,isShowClear:false})"></asp:TextBox></li>
                                                </ul>
                                            </div>
                                            <div id="divName" runat="server" visible="false">
                                                <ul>
                                                    <li style="list-style: none; float: left; font-size: 16px;">船名称：</li>
                                                    <li style="list-style: none; float: left; font-size: 16px;">
                                                        <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td class="xx2">
                                            <a href="#">
                                                <img src="images/img-06.png" alt="" name="img06" width="105" height="33" border="0"
                                                    id="img06" onload="" />
                                                <asp:HiddenField ID="hfOption" runat="server" Value="" />
                                            </a>
                                        </td>
                                        <td width="50">
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="h10">
                </div>
                <div style="height: 450px; width: 940px">
                    <table id="dt">
                    </table>
                </div>
                <div class="h05">
                </div>
            </div>
        </div>
    </div>
    <div class="clear h20">
    </div>
    <!--底部信息-->
    <uc1:Net_ControlBottom ID="Net_ControlBottom1" runat="server" />
    </form>
</body>
</html>

</pre><pre code_snippet_id="1733015" snippet_file_name="blog_20160628_4_1752466" name="code" class="html">

杂谈：最近在做接口展示，除了为了加密接口地址，在后台定义webservice方法接收接口数据，之外全是前台的工作。作为一个后台菜鸟，前台一直是我的痛，最难受的是还没美工，只能硬着头皮强上了。不求好看，但求一般的情况下能过眼，还好现在有不少现成的前端框架，学习吧，骚年。。

Loaddata加载本地数据的时候，easyui-datagrid默认的分页不能用，只能手写了。记录下，以后复用

逐梦の心安
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
easyui_Datagrid 数据网格 loadData
Dreamy_wit的博客
07-27 1479
摘要：datagrid中有load,reload,loadData那三个方式，皆是加载数据的，但又有差别。下面让我们一起来看看：首先，load方法，比如我已经定义一个datagrid的id为grid，那这个方法的使用方式为$(“#grid”).datagrid(“load”,{ });它的参数为一个json对象，里面写的是你要传输的参数的键值对，调用这个方法来加载数据的时候，它传给后台的分页信息是从
EasyUI datagrid 使用loadData重置列表数据
可控的事情要谨慎，不可控的事情要乐观。
09-26 2063
选中一个商品进货单，下面的那个datagrid（命名为dg2）展示该进货单对应的进货单商品 此时 如果在供应商下拉框中选择一个其他的供应商，然后查询，一定要让下面的那个datagrid(dg2)数据列表重置，如下图： 下面实现： function searchPurchase(){ //查询进货单时，让dg2进货单重置 $("#dg2").datagrid("loadData",{t...
EasyUI（datagrid）: load()、reload()、loadData()方法含义及区别比较
travel7623的博客
07-22 4460
1.load方法 $(“#grid”).datagrid(“load”,{ });//后台快捷追加查询 该方法是一个简便后台方式，可以带参数，参数为一个json对象，里面写的是你要传输的参数的键值对，调用这个方法来加载数据的时候，它传给后台的分页信息是从第一页开始的，然后遵照表格初始化的方法进行回显数据 2.reload方法: $(“#grid”).datagrid(“reload”,{ });...
easyui datagrid加载数据的两种方式
热门推荐
三五月儿的专栏
01-15 3万+
1、加载本地数据var obj = {'total':2,'rows':[{id:'1',name:'一'},{id:'2',name:'二'}]}; $('#dg').datagrid('loadData',obj);注意：这里的数据必须是json对象，要是json字符串，必须先转换成json对象才能作为datagrid的数据源。var str = '{'total':2,'rows':[{
EasyUI——DataGrid数据显示
weixin_65975275的博客
05-11 1891
DataGrid数据显示
jQuery EasyUI datagrid实现本地分页的方法
01-19
本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法。分享给大家供大家参考。具体如下： 一般分页都是后台做，前端做无论从哪方面考虑都不合适。但是有的时候还是有这种需求。 这里重点用到了pagination的监听...
easyui-datagrid之间拖拽效果demo
03-18
easyui-datagrid之间拖拽效果demo
easyui-datagrid特殊字符不能显示的处理方法
11-28
在easyui中datagrid、combobox、tree等组件都不能显示含有html标签的特殊字符，因为这些字符会被当作html标签被解析掉。这里给出了一个处理方案，希望对大家有帮助。 以datagrid为例： 找到jquery.datagrid.js文件，...
JS EasyUI DataGrid动态加载数据
03-15
JS EasyUI DataGrid动态加载数据
EasyUI datagrid插件 loader属性 使用详解
wuyujin1997的博客
05-08 5947
intro loader 定义如何从远程服务器加载数据，如果返回false则取消动作。 loader属性指向一个函数表达式：function(param, succcess(data), error) {...}。 另：loadFilter属性用于过滤返回的分页数据的格式(必须包含total和rows)。 code 打印loader方法的三个参数 // 定义如何从远程服务器加载数据。返回fal...
easyUi 本地加载数据并分页
PJF1501105594的博客
07-29 525
function pagerFilter(data) { if (typeof data.length == 'number' && typeof data.splice == 'function') { // is array data = { total: data.length, rows: data } } .
easyui中datagrid分页问题
yrd18745200375的博客
10-19 597
要想给datagrid实现分页的效果，那么datagrid必须有这三个属性：             pagination: true,//分页控件，只有为true时才显示分页控件 pageSize: 15, //设置每页的条数 pageList: [10, 15, 30, 50] 在给datagrid添加分页时，属性中必须有url属性，否则分页不好使
EasyUI之datagrid('load',object)
阳光丶不锈
08-24 2122
EasyUI之datagrid(‘load’,object) 使用form表单提交查询条件的时候，以往都是用get到value，然后把这些get的value封装到一个JavaScript对象中。 Jquery提供了一个方法，可以自动对表单中的条件进行封装。 工作流程 jsp中创建表单，包含相关查询条件的字段 封装表单的查询条件到JavaScript对象中 调用serializeObjec
easyui中datagrid执行loadData方法没有刷新数据
technologys的博客
12-10 8843
原因分析： loadData方法执行的时候参数必须是JSON对象，而不能是JSON格式的字符串！！！ 估计搞前端的人都有这个概念吧。    开始我是这样写的 var data = '{"total":1,"rows":[{"id":"001","name":"哈哈哈","role":"系统管理员"}]}';  $('#dg').datagrid('loadData', data
easyui的datagrid无数据时下方滚动条不显示的解决办法（标题栏显示不完全）
weixin_30824277的博客
11-25 463
　　easyui在写datagrid的时候标题栏有时候因为太多、太长所以无法显示所有的列，而且没数据的时候下方的滚动条是不显示的，这样就无法显示所有的列了。解决办法如下： 　　 1 onLoadSuccess: function (data) { 2 if (data.total == 0) {$('#dgReportList').datagri...
EasyUI的datagrid分页不显示数据的解决方法
qq_41702574的博客
11-01 1033
按照官网的datagrid的说明书填写好分页代码，url和json文件也设置好了，但就是不显示数据。原因可能是一个js函数没有调入，为避免大家踩坑。现分享该主要函数如下： datagrid的标签是表格id的“dg”。 <table id="dg" class="easyui-datagrid" style="width:98%;height:90%;" title="请输入条件查询" OnPageIndexChanged="DataGrid_Page" iconCls="icon-search.
easyui中datagrid不加载问题
shandalue的专栏
01-05 2887
今日遇到一个奇怪问题，datagrid就是不加载，debug看了一下，触发对象貌似不正常。使用jquery或者dom去查找元素都找不到，但是easyui也不报undifined异常，很是奇怪。 问题出现环境：页面三层结构，第一层是一个datagrid，点击其中链接通过新建window进入第二层，第二层包含普通form元素，点击链接通过新建window进入第三层，在第三层使用datagri
总结目前用Jquery-Easyui做后台，遇到datagrid分页及数据刷新问题
xl_396283528的博客
01-01 5253
一、介绍一个使用datagrid时，为datagrid表格填充后台数据时的陷阱及误区** 1. 在网上搜索时，大部分网友都说在后台java代 码中返回一个固定格式的json对象就可以为datagrid填充数据， 这是没错的这段json数据必须包含两个key分别是total，rows。 但其真正的含义往往会被误解。 *rows：表示是后台返回给datagrid的当前所在页的所有纪录， 记住是当前所在
easyui-datagrid 放大镜模糊查询
最新发布
11-07
easyui-datagrid是一款基于jQuery的表格插件，它提供了丰富的功能和灵活的配置选项。放大镜模糊查询是easyui-datagrid的一种查询方式，它可以在datagrid的工具栏中添加一个放大镜图标，用户可以在输入框中输入关键字，点击放大镜图标进行模糊查询。查询结果会在datagrid中显示出来，方便用户快速定位到所需数据。 实现放大镜模糊查询的步骤如下： ```javascript //1.在datagrid的toolbar中添加查询输入框和放大镜按钮 $('#dg').datagrid({ toolbar: [{ text: '查询条件：' }, { iconCls: 'icon-search', handler: function() { //2.获取查询关键字 var keyword = $('#searchbox').textbox('getValue'); //3.设置查询参数 $('#dg').datagrid('load', { keyword: keyword }); } }, '-', { xtype: 'textfield', id: 'searchbox', width: 200, emptyText: '请输入查询关键字' }] }); //4.在datagrid的后台处理程序中获取查询参数，并进行模糊查询 public function search($keyword) { $where = "name like '%$keyword%' or address like '%$keyword%'"; $data = $this->db->where($where)->get('user')->result_array(); echo json_encode($data); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值