第一种方式：通过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及冻结列的两种方式的更多相关文章

  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. LeetCode 942 DI String Match 解题报告

    题目要求 Given a string S that only contains "I" (increase) or "D" (decrease), let N ...

  2. 《linux 用户管理》- useradd/userdel/usermod/groupadd/who/w

    一:概念 在 Linux 中,使用一个 32位整数 来记录每一个用户(USER ID 简单 UID),这意味着在 Linux 中,可以有 40亿 个不同的用户. 系统. 在 /etc/passwd  ...

  3. linux strncpy()和strcat使用总结

    strcat原型:char *strcat(char *dest,const char *src); 把src所指字符串添加到dest结尾处(覆盖dest结尾处的'\0')并添加'\0'.src和de ...

  4. linux下修改/etc/profile文件

    inux下修改/etc/profile文件 2017年01月06日 14:30:12 白昙 阅读数:8540 标签: linux 更多 个人分类: linux   通常情况下,/etc/profile ...

  5. 20170803 Airflow自带的API进行GET 和POST动作部分内容

    --1 首先你要有安装好的Airflow 环境并且在配置文件中有启用API 属性 --2 就是GET 和POST 方法的调用了 这里说一下,由于Airflow在网络上的资料比较少,可以从GETHUB中 ...

  6. 实时Cartographer测试(1) - rplidar

    1.rplidar实时测试 参考文献:http://www.cnblogs.com/liangyf0312/p/8028441.html 修改USB转串口权限 yhexie@ubuntu:~$ cd ...

  7. [py]py里的isinstance判断实例来源(含父类)

    Isinstance() 函数来判断一个对象是否是一个已知的类型,类似 type(). isinstance() 与 type() 区别: type() 不会认为子类是一种父类类型,不考虑继承关系. ...

  8. Jmeter各参数含义

    1.聚合报告分析 Label:每个JMeter的element(例如HTTP Request)都有一个Name属性,这里显示的就是Name属性的值 #Sample:表示你这次测试中一共发出了多少请求, ...

  9. （转）RBAC权限表的设计

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  10. PHP类名获取的几种方式及单例模式实现

    参考:https://www.cnblogs.com/water0729/p/5803217.html <?php class foo { static public function test ...