向DataGrid数据表格增加查询搜索框

Posted bobozz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了向DataGrid数据表格增加查询搜索框相关的知识,希望对你有一定的参考价值。

向DataGrid数据表格增加查询搜索框

  • 效果如下:

     技术图片

  • js代码:

     

    $(function()
         var dg = $(‘#dg‘).datagrid(
            url:"$pageContext.request.contextPath/OfferServlet",//servlet路径
            columns:[[
            field:‘offerid‘,title:‘商品ID‘,width:100,
                field:‘offername‘,title:‘商品名称‘,width:100,
                field:‘offertype‘,title:‘商品类型‘,width:100,
                field:‘offerdesc‘,title:‘商品描述‘,width:300,
                field:‘price‘,title:‘商品价格‘,width:150
            ]]        
        );
         $("#standardQueryBtn").click(function()//点击搜索按钮的触发事件
                
                $("#dg").datagrid(‘load‘,//调用load方法传递参数,从服务器加载新数据
                    "offer.id": $("#offerid").val(),//将搜索框里的值赋给建立的offer.id并传递到后端
                    "offer.name": $("#offername").val(),
                );
    
            );
    );

     

  • jsp代码:

     

    <table id="dg" title="用户列表" class="easyui-datagrid" style="width:1000px;height:250px" toolbar="#toolbar"
         rownumbers="true" pagination="true">
    </table> 
    
    <div id="toolbar">
            <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newOffer()">新增商品</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editOffer()">编辑商品</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyOffer()">删除商品</a><br>
                商品ID:<input type="text" name="offer.id"  id="offerid" /> 
            商品名称:<input type="text" id="offername"/> 
            <a id="standardQueryBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:‘icon-search‘">搜索</a>  
        </div>    

     

  • 通过该方法传递的参数可以直接在后台get到。

以上是关于向DataGrid数据表格增加查询搜索框的主要内容,如果未能解决你的问题,请参考以下文章

实现DataTables搜索框查询结果高亮显示

Jquery 搜索框自动提示

小白求教,jquery easyui的分页条和搜索框是怎么向后台传参数的?

原生实现DIV拖拽功能(修复)和搜索框的模糊查询

用easyui实现查询条件的后端传递并自动刷新表格的两种方法

请问如何用easyui的combobox实现中文搜索