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

向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>