easyui的datagrid的使用方法

环境：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>

easyui的datagrid的使用方法相关推荐

EasyUI中Datagrid列定位方法
lastIndex = $('#grid').datagrid('getRows').length - 1;//获取编辑的行号 var editors = $('#grid').datagrid('g ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
EasyUI加zTree使用解析 easyui修改操作的表单回显方法验证框提交表单前验证 datagrid的load方法...
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{code: '01',name: 'name01' }); easyui修改操作的回显方法 ...
easyui的datagrid的使用记录
datagrid是在 table的基础上变化而来的, 而不是在div的基础上来的. 从div来变成 datagrid,样式的设置还是是比较麻烦的. dg=datagrid 的标题来源于 column ...
给Jquery easyui 的datagrid 每行增加操作链接（转载）
转自:http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的E ...
给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接我们都知道Jquery的Easy ...
easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
easyUI下datagrid嵌套显示
主要是运用 easyui的方法进行行内嵌套显示,让一行可以显示更多的东西,让一行显示JSON的字符串.从表之类的东西. 下边先看效果图: 接下来说实现过程: (1)在首次加载中添加代码 view: d ...

easyui的datagrid的使用方法

easyui的datagrid的使用方法相关推荐

最新文章

热门文章