利用ligerUI實現類似資料列表過濾展示,類似JQuery datatable和某些框架的dataGrid
阿新 • • 發佈:2019-02-09
1. 利用的是ligerui的框架,本篇文章使用的ligui版本是LigerUIV1.3.3 , 網址 <a href="http://www.ligerui.com">www.ligerui.com</a>
2. 如下圖展示
3.程式碼如下
3.1 先匯入css 和 js檔案
<!-- 匯入css樣式 --> <link href="${ctx}/js/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <%-- <link href="${ctx}/js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /> --%> <%-- <link href="${ctx}/js/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" /> --%> <!-- 匯入js檔案 --> <script src="${ctx}/js/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/core/base.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerGrid.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerTextBox.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerCheckBox.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerComboBox.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerMenuBar.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerToolBar.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerButton.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script> <script src="${ctx}/js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
3.2 HTML內容
<div class="content"> <div class="search"> <label style="font-size: 20px;">姓名:</label> <input type="text" id="clientName" style="height: 25px;" /> <label style="margin-left: 50px; font-size: 20px;">年齡:</label> <input type="text" id="clientAge" style="height: 25px;" /> <input type="button" id="filterBtn" value="過濾"> </div> <div id="maingrid4" style="margin: 0; padding: 0"></div> </div>
3.3 js框架處理
function onedit(id) { alert(id); }; var usrGrid; $(function() { //初始化表格 usrGrid = $("#maingrid4").ligerGrid({ columns : [{ display : '主鍵', name : 'id', align : 'left', width : 120, hide : true, type : 'int' }, { display : '姓名', name : 'name', width : 120 }, { display : '年齡', name : 'age', width : 120 }, { display : 'accountId', name : 'accountId', width : 120, hide : true }, { display : '賬戶', name : 'accountName', width : 120, align : 'left' }, { display : '操作', render : function(row) { var html = "<a href='#' onclick='onedit(\"" + row.name + "\")';>編輯</a>"; return html; } }], checkbox : true,// 是否支援複選框 width : 'auto', height : '80%', rownumbers : true,// 顯示行號 // 傳送到伺服器的引數 pageParmName : 'pageNo',// 頁號的引數名 pagesizeParmName : 'pageSize',// 每頁資料量的引數名 pageSize : 10,// 設定每頁顯示的資料條數 // 設定接收來自伺服器返回的json引數 record : 'total',// 總頁數引數名 root : 'data',// 當前查詢頁的資料引數名 url : top.pt.ctx + '/web/module/user/findUserPageList.action', method : 'post', // 自己額外需要傳遞到伺服器的引數 parms : { "country" : 'cn', "customerId" : 'tgfig_658947' } }); //點選過濾按鈕後的處理 $("#filterBtn").click(function() { var gridManager = $("#maingrid4").ligerGetGridManager(); // setOptions可以額外添加發送到伺服器的引數 var clientName = $("#clientName").val(); var clientAge = $("#clientAge").val(); gridManager.setOptions({ parms : [{ name : 'clientName', value : clientName }, { name : 'clientAge', value : clientAge }] }); gridManager.loadData(true); }); });
3.4 瀏覽器向伺服器提交的資料
{"data":[{"accountId":2001,"accountName":"家人賬戶","age":23,"college":"555","id":105,"name":"555"},{"accountId":2002,"accountName":"獎學金卡","age":45,"college":"234","id":1001,"name":"Jack"},{"age":21,"college":"369","id":1002,"name":"Tom"},{"age":17,"college":"589","id":1003,"name":"Jane"},{"age":19,"college":"111","id":1004,"name":"111"},{"age":20,"college":"66","id":1006,"name":"666"},{"age":21,"college":"777","id":1007,"name":"777"},{"age":18,"college":"888","id":1008,"name":"888"},{"age":17,"college":"99","id":1009,"name":"999"},{"age":22,"college":"1011","id":1011,"name":"1011"}],"total":12}
3.6 在過濾欄輸入過濾內容
3.7 點選過濾按鈕後向伺服器提交的請求引數