jQuery DataGrid 是一個基于 jQuery 的簡單而強大的表格插件,它可以方便地在網頁上使用表格來存儲和展示數據。其中,它的查詢功能讓它更加實用。
使用 jQuery DataGrid 進行查詢非常簡單。首先,我們需要引入 DataGrid 的 JavaScript 和 CSS 文件。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="datagrid.js"></script> <link rel="stylesheet" href="datagrid.css">
接下來,我們需要配置 DataGrid 的參數。這里我們以一個簡單的示例來說明。首先,我們定義一個數據源:
var data = [ {id: 1, name: "張三", age: 20}, {id: 2, name: "李四", age: 22}, {id: 3, name: "王五", age: 25}, {id: 4, name: "趙六", age: 26}, {id: 5, name: "錢七", age: 30} ];
然后,我們定義查詢條件:
var queryParams = { name: "", minAge: 0, maxAge: 100 };
接著,我們配置 DataGrid 的參數:
$('#datagrid').datagrid({ data: data, columns: [[ {field: 'id', title: 'ID'}, {field: 'name', title: '姓名'}, {field: 'age', title: '年齡'} ]], pagination: true, pageSize: 2, queryParams: queryParams, toolbar: [{ text: '查詢', iconCls: 'icon-search', handler: function(){ var name = $('#name').val(); var minAge = $('#minAge').val(); var maxAge = $('#maxAge').val(); $('#datagrid').datagrid('load', { name: name, minAge: minAge, maxAge: maxAge }); } }] });
最后,我們在頁面上添加表格和查詢條件:
<input id="name" value=""> <input id="minAge" value="0"> <input id="maxAge" value="100"> <div id="datagrid"></div>
這樣,我們就可以在頁面上看到一個帶有查詢功能的表格了。當我們輸入查詢條件并點擊“查詢”按鈕時,表格就會根據條件自動更新。
下一篇兼職網站css