easyui datagrid新增搜尋框
阿新 • • 發佈:2018-12-20
圖例:
程式碼部分:
-----------------------------------------
匯入easyui CSS,JS檔案:
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css"> <script type="text/javascript" src="../../easyui/jquery.min.js"></script> <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
-----------------------------------------
JS程式碼:
<script type="text/javascript"> $(function(){ $('#dg').datagrid({ fit:false, border:true, singleSelect:true, fitColumns:true, url : "${pageContext.request.contextPath}/standard/list", columns : [ [ { field : 'id', title : '編號', width : 100 }, { field : 'name', title : '名稱', width : 200 }, { field : 'minWeight', title : '最小重量', width : 200 }, { field : 'maxWeight', title : '最大重量', width : 200 }, { field : 'minLength', title : '最小長度', width : 200 }, { field : 'maxLength', title : '最大長度', width : 200 } ] ], toolbar:"#tb", pagination:true, pageNumber:1, pageSize:3, pageList:[3,6,9] }); $("#standardQueryBtn").click(function(){ $("#dg").datagrid("load",{ "standard.name": $("#qName").val(), "standard.minWeight": $("#qMinWeight").val(), "standard.minLength": $("#qMinLength").val() }); }); }); </script>
-----------------------------------------
HTML程式碼:
<table id="dg"></table> <div id="tb"> 名稱<input type="text" name="standard.name" id="qName" /> 最小重量<input type="text" name="standard.minWeight" id="qMinWeight"/> 最小長度<input type="text" name="standard.minLength" id="qMinLength"/> <a id="standardQueryBtn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜尋</a> </div>