第一种方式：通过HTML标签创建数据表格控件

  1. <table class="easyui-datagrid" title="基本数据表格"
  2.         style="width: 700px; height: 250px"
  3.         data-options="singleSelect:true,collapsible:true,url:'${pageContext.request.contextPath}/datagridData.do'">
  4.         <thead data-options="frozen:true">
  5.             <tr>
  6.                 <th data-options="field:'stuId',width:100">学生ID</th>
  7.                 <th data-options="field:'stuName',width:100">学生姓名</th>
  8.             </tr>
  9.         </thead>
  10.         <thead>
  11.             <tr>
  12.                 <th data-options="field:'stuSex',width:100">学生性别</th>
  13.                 <th data-options="field:'stuAge',width:100">学生年龄</th>
  14.                 <th data-options="field:'stuEmail',width:100,align:'center'">学生邮箱</th>
  15.                 <th data-options="field:'stuQQ',width:100,align:'right'">学生QQ</th>
  16.                 <th data-options="field:'stuAddress',width:200,align:'center'">学生地址</th>
  17.             </tr>
  18.         </thead>
  19.         <tbody>
  20.             <c:forEach var="student" items="${studentList}">
  21.                 <tr>
  22.                     <td>${student.stuId}</td>
  23.                     <td>${student.stuName}</td>
  24.                     <td>${student.stuSex}</td>
  25.                     <td>${student.stuAge}</td>
  26.                     <td>${student.stuEmail}</td>
  27.                     <td>${student.stuQQ}</td>
  28.                     <td>${student.stuAddress}</td>
  29.                 </tr>
  30.             </c:forEach>
  31.         </tbody>
  32.     </table>

data-options="frozen:true"冻结列

   第二种方式：使用Javascript去创建数据表格控件

  1. <body>
  2.     <table id="studentList">
  3.         <tbody>
  4.             <c:forEach var="student" items="${studentList}">
  5.                 <tr>
  6.                     <td>${student.stuId}</td>
  7.                     <td>${student.stuName}</td>
  8.                     <td>${student.stuSex}</td>
  9.                     <td>${student.stuAge}</td>
  10.                     <td>${student.stuEmail}</td>
  11.                     <td>${student.stuQQ}</td>
  12.                     <td>${student.stuAddress}</td>
  13.                 </tr>
  14.             </c:forEach>
  15.         </tbody>
  16.     </table>
  17. </body>
  18. <script type="text/javascript">
  19.     $('#studentList').datagrid({
  20.         title : '基本数据表格',
  21.         width : 700,
  22.         height : 250,
  23.         url : '${pageContext.request.contextPath}/datagridData.do',
  24.         frozenColumns : [ [ {
  25.             field : 'stuId',
  26.             title : '学生ID',
  27.             width : 100
  28.         }, {
  29.             field : 'stuName',
  30.             title : '学生姓名',
  31.             width : 100
  32.         } ] ],
  33.         columns : [ [ {
  34.             field : 'stuSex',
  35.             title : '学生性别',
  36.             width : 100
  37.         }, {
  38.             field : 'stuAge',
  39.             title : '学生年龄',
  40.             width : 100
  41.         }, {
  42.             field : 'stuEmail',
  43.             title : '学生邮箱',
  44.             width : 100
  45.         }, {
  46.             field : 'stuQQ',
  47.             title : '学生QQ',
  48.             width : 100
  49.         }, {
  50.             field : 'stuAddress',
  51.             title : '学生地址',
  52.             width : 200,
  53.             align : 'center'
  54.         } ] ]
  55.  
  56.     });
  57. </script>

frozenColumns属性冻结列

EasyUI创建DataGrid及冻结列的两种方式的更多相关文章

  1. easyui里面的加载tree的两种方式

    第一种: 使用EasyUI中Tree 符合EasyUI中Tree的Json格式,我们先看一下,格式是如何的 [{ "id":1, "text":"My ...

  2. easyui datagrid加载数据的两种方式

    1.加载本地数据 var obj = {"total":2,"rows":[{id:"1",name:"一"},{id: ...

  3. 【Android】创建Popwindow弹出菜单的两种方式

    方法一的Activity package com.app.test02; import android.app.Activity; import android.os.Bundle; import a ...

  4. 【转】android创建Popwindow弹出菜单的两种方式

    方法一的Activity package com.app.test02; import android.app.Activity; import android.os.Bundle; import a ...

  5. linq查询结果指定列的两种方式

    方式一: var results = from product in products orderby product.Price descending select new { product.Na ...

  6. 雷林鹏分享：jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  7. easyUI之datagrid绑定后端返回数据的两种方式

    先来看一下某一位大佬留下的easyUI的API对datagrid绑定数据的两种方式的介绍. 虽然精简,但是,很具有“师傅领进门,修行靠个人”的精神,先发自内心的赞一个. 但是,很多人和小编一样,第一次 ...

  8. 【java并发】传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  9. 创建TabHost的两种方式的简单分析

    最近做了一个TabHost的界面,在做的过程中发现了一些问题,故和大家分享一下. 首先我的界面如下: 目前就我所知,创建TabHost有两种方式,第一种是继承TabActivity类,然后用getTa ...

随机推荐

  1. 洛谷 P3684 机棚障碍Hangar Hurdles [CERC2016] 图论

    正解: 解题报告: 传送门! 首先不难想到这题主要有两个问题需要解决,一个是预处理出各个点的箱子半径最大值,一个是求ans 然后分别港下QwQ 首先关于预处理要说下昂 预处理有三种方法,分别港下 第一 ...

  2. AT2567 RGB Sequence dp

    正解:计数dp 解题报告: 传送门! umm其实我jio得dp的题目的话就难在思想昂,,,知道状态知道转移就不难辣QAQ 所以就不说别的了直接写下思路放下代码就over辣QAQ 最基础的思想就是f[i ...

  3. pandas操作速查表

    准备工作 import numpy as np import pandas as pd 倒入文件或创建一个数据表 df = pd.DataFrame(pd.read_csv('name.csv',he ...

  4. cxImage控件使用

    属性: Picture:载入要显示的图片 Properties->Caption在没有内容的时候显示在图片框中间的文字 Properties->PopupMenuLayout->Me ...

  5. 比Xshel更好用的 FinalShell

    FinalShell功能特点: 1.多平台支持Windows,Mac OS X,Linux 2.多标签,批量服务器管理. 3.支持登录Ssh和Windows远程桌面. 4.漂亮的平滑字体显示,内置10 ...

  6. vue-电脑端导出-txt

    // fakeClick(obj) { // var ev = document.createEvent("MouseEvents"); // ev.initMouseEvent( ...

  7. PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法

    一.数字补0. 如果要自动生成学号,自动生成某某编号,就像这样的形式“d0000009”.“d0000027”时,那么就会面临一个问题,怎么把左边用0补齐成这样8位数的编码呢?我想到了两种方法实现这个 ...

  8. 开发十年，只剩下这套Java开发体系了

    蓦然回首自己做开发已经十年了,这十年中我获得了很多,技术能力.培训.出国.大公司的经历,还有很多很好的朋友.但再仔细一想,这十年中我至少浪费了五年时间,这五年可以足够让自己成长为一个优秀的程序员,可惜 ...

  9. mybatis 调用oracle存储过程如何返回out参数值

    调试了半天,其实整体用map传入传出也挺简单, 主要是调用存储过程 select标签里平时习惯不写 statementType="CALLABLE",调用没有out参数时也能正常用 ...

  10. node使用 mongoose聚合 group

    var mongoose = require('mongoose'); mongoose.connect("mongodb://localhost:27017/test", fun ...