欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-28 10:05:28
向DataGrid数据表格增加查询搜索框 效果如下: js代码: $(function(){ var dg = $('#dg').datagrid({ url:"${pageContext.request.contextPath}/OfferServlet",//servlet路径 columns: ......

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

上一篇:

下一篇: