EasyUI创建DataGrid及冻结列的两种方式
第一种方式:通过HTML标签创建数据表格控件
<table class="easyui-datagrid" title="基本数据表格"
style="width: 700px; height: 250px"
data-options="singleSelect:true,collapsible:true,url:'${pageContext.request.contextPath}/datagridData.do'">
<thead data-options="frozen:true">
<tr>
<th data-options="field:'stuId',width:100">学生ID</th>
<th data-options="field:'stuName',width:100">学生姓名</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'stuSex',width:100">学生性别</th>
<th data-options="field:'stuAge',width:100">学生年龄</th>
<th data-options="field:'stuEmail',width:100,align:'center'">学生邮箱</th>
<th data-options="field:'stuQQ',width:100,align:'right'">学生QQ</th>
<th data-options="field:'stuAddress',width:200,align:'center'">学生地址</th>
</tr>
</thead>
<tbody>
<c:forEach var="student" items="${studentList}">
<tr>
<td>${student.stuId}</td>
<td>${student.stuName}</td>
<td>${student.stuSex}</td>
<td>${student.stuAge}</td>
<td>${student.stuEmail}</td>
<td>${student.stuQQ}</td>
<td>${student.stuAddress}</td>
</tr>
</c:forEach>
</tbody>
</table>
data-options="frozen:true"冻结列
第二种方式:使用Javascript去创建数据表格控件
<body>
<table id="studentList">
<tbody>
<c:forEach var="student" items="${studentList}">
<tr>
<td>${student.stuId}</td>
<td>${student.stuName}</td>
<td>${student.stuSex}</td>
<td>${student.stuAge}</td>
<td>${student.stuEmail}</td>
<td>${student.stuQQ}</td>
<td>${student.stuAddress}</td>
</tr>
</c:forEach>
</tbody>
</table>
</body>
<script type="text/javascript">
$('#studentList').datagrid({
title : '基本数据表格',
width : 700,
height : 250,
url : '${pageContext.request.contextPath}/datagridData.do',
frozenColumns : [ [ {
field : 'stuId',
title : '学生ID',
width : 100
}, {
field : 'stuName',
title : '学生姓名',
width : 100
} ] ],
columns : [ [ {
field : 'stuSex',
title : '学生性别',
width : 100
}, {
field : 'stuAge',
title : '学生年龄',
width : 100
}, {
field : 'stuEmail',
title : '学生邮箱',
width : 100
}, {
field : 'stuQQ',
title : '学生QQ',
width : 100
}, {
field : 'stuAddress',
title : '学生地址',
width : 200,
align : 'center'
} ] ] });
</script>
frozenColumns属性冻结列
EasyUI创建DataGrid及冻结列的两种方式的更多相关文章
- easyui里面的加载tree的两种方式
第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My ...
- easyui datagrid加载数据的两种方式
1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...
- 【Android】创建Popwindow弹出菜单的两种方式
方法一的Activity package com.app.test02; import android.app.Activity; import android.os.Bundle; import a ...
- 【转】android创建Popwindow弹出菜单的两种方式
方法一的Activity package com.app.test02; import android.app.Activity; import android.os.Bundle; import a ...
- linq查询结果指定列的两种方式
方式一: var results = from product in products orderby product.Price descending select new { product.Na ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列
jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...
- easyUI之datagrid绑定后端返回数据的两种方式
先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...
- 【java并发】传统线程技术中创建线程的两种方式
传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...
- 创建TabHost的两种方式的简单分析
最近做了一个TabHost的界面,在做的过程中发现了一些问题,故和大家分享一下. 首先我的界面如下: 目前就我所知,创建TabHost有两种方式,第一种是继承TabActivity类,然后用getTa ...
随机推荐
- 在RAC执行相关操作发生ora-01031:insufficient privileges解决方法
grid用户下 寻找命令的路径 如which crsctl su - root用户 然后根据找到的路径去执行命令 如 /u01/app/oracle/product/11.2.0/db_1/bin/c ...
- 浏览器数据库 IndexedDB 入门教程
一.概述 随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据. 现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的 ...
- js中值的基本类型与引用类型,以及对象引用,对象的浅拷贝与深拷贝
js有两种类型的值:栈:原始数据类型(undefinen,null,boolead,number,string)堆:引用数据类型(对象,函数和数组)两种类型的区别是:储存位置不同,原始数据类型直接存储 ...
- P1896 [SCOI2005]互不侵犯 状压dp
正解:状压dp 解题报告: 看到是四川省选的时候我心里慌得一批TT然后看到难度之后放下心来觉得大概没有那么难 事实证明我还是too young too simple了QAQ难到爆炸TT我本来还想刚一道 ...
- python 去除微软的BOM
傻逼微软会给文件前面加上efbbbf, 导致开发人员浪费很多时间在排错上,下面通过python代码来实现去除微软BOM的功能 用法很简单,指定可能含有BOM开头的文件,并且将微软的\r\n 换成lin ...
- R的常用命令
mean(x) 求x的均值 sd(x) 求x的标准差 plot(x,y) 图形展示x和y的关系 ls() 查看当前所有加载到内存中的对象 rm(x) 删除当前内存中的对象x length(x) 求x的 ...
- Ubuntu上Xilinx ARM交叉编译器安装
1,Windows中下载交叉编译器 2,在ubuntu中创建zedboard目录,并将交叉编译器复制进来 3,将该交叉编译器设置成可执行程序 chmod a+x xilinx-2011.09-50 ...
- Java高频面试题
网络相关 1.http1.0和http1.1的区别? http1.0每次请求都需要和服务器建立一个TCP连接,服务器完成请求后立即断开TCP连接. http1.1支持长连接,客户端在http请求头上加 ...
- MongoDB update修改器: 针对Fields的$修改器 $inc $set $unset
MongoDB update修改器: $inc $set $unset $push $pull $pop 针对Fields的$修改器 $set: { $set: { key: value } } $s ...
- Sql批量修改帝国cms文章发布时间(需unix时间,否则会变为1970-01-01)
在迁移网站时,有时我们需要将帝国cms文章发表时间批量修改为当前时间,在帝国cms后台→系统设置→备份与恢复数据→执行sql语句: update phome_ecms_news set newstim ...