easyui的datagrid的使用方法
阿新 • • 發佈：2018-12-12
環境：Spring boot +Thymeleaf+jps+easyui
引入thymeleaf模板引擎
<html lang="en" xmlns:th="http://www.thymeleaf.org">Html頁面引入easyui需要的檔案
<head> <meta charset="UTF-8"> <title>Basic Panel - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/demo/demo.css"> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> </head>
一、使用js建立元件
①、在easyui的layout中的center中定義一個table，id為“datagridTable”。
<div region="center" border="false">
<table id="datagridTable"></table>
</div>②、使用javascript的方式讓這個table變為一個easyui的datagrid。當然也可以給這個table指定class屬性為“easyui-datagrid”
<script type="text/javascript"> $(function() { $("#datagridTable").datagrid({ url : 'getUsers', title : '使用者列表', pagination : true, pageSize : 10, pageList : [ 10, 20, 30, 40 ], fit : true,//自適應視窗大小變化 fitColumns : true, border : false, idField : 'id', columns : [ [ { title : '使用者編號', field : 'id', width : 100 //寬度必須，數值隨便 }, { title : '使用者名稱', field : 'username', width : 100 }, { title : '使用者密碼', field : 'password', width : 100 },{ title:'註冊時間', field:'date', width:100 } ] ], toolbar : [ { text : '增加', iconCls : 'icon-add', handler : function() { } }, '-', { text : '刪除', iconCls : 'icon-remove', handler : function() { } }, '-', { text : '編輯', iconCls : 'icon-edit', handler : function() { } } ] //兩個[],實現多級表頭，合併單元格的效果，產生不規則表頭 }); });
二、使用easyUI建立元件的列子
<table class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,collapsible:true,url:'/getUsers',method:'get'"> <thead> <tr> <th data-options="field:'id',width:80">Item ID</th> <th data-options="field:'name',width:100">姓名</th> <th data-options="field:'tel',width:80,align:'right'">電話</th> </tr> </thead> </table>