第一种方式：通过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. Django 正向解析与反向解析

    正向解析就是按照顺序查找访问(urls.py---view--templates) 反向解析就是根据命名空间命名来调到指定的页面 用反向解析的原因: 随着功能的增加会出现更多的视图,可能之前配置的正则 ...

  2. cb && cb() 和 a || {}

    cb && cb() 等同于 if(cb != undefined) { cb(); } a || {} var flag = false var a = flag || {} a / ...

  3. mysql from dual插入实现不插入重复记录

    在mysql中插入一或者多条记录的时候,要求某个字段的值唯一,但是该字段没有添加唯一性索引,可用from dual解决. select * from (select '2015080109' a,2 ...

  4. vue启动调试、启动编译的批处理

    Rundev.bat cd %~dp0npm run dev RunBuild.bat cd %~dp0npm run build

  5. dedecms后台左侧菜单500错误怎么处理

    前面dedecms后台左侧菜单空白不显示怎么处理,但有些网友还是反应说不能显示,提示500错误,这可能是iis配置或apache设置不正确有关,一般是正常的.但是,既然问题出现了,我们还是要去解决.下 ...

  6. Replication主要配置项

    八.Replication主要配置项(配置文件) 1.log_bin:指定binlog文件的名称,同时也表示开启binlog功能,在replication模式下,master上必须开启log_bin, ...

  7. 腾讯游戏DBA团队的发展自白

    BA这个岗位跟仓管员很像,就是每天给别人发点货,别人在你这儿放点货,DBA工作就是把货尽快给送出去或者让人家尽快放进来.当然,还有一份重要的工作,就是让仓库里摆放的货物尽可能整齐,这也是仓管员的本职工 ...

  8. 从Trie树（字典树）谈到后缀树

    转:http://blog.csdn.net/v_july_v/article/details/6897097 引言 常关注本blog的读者朋友想必看过此篇文章:从B树.B+树.B*树谈到R 树,这次 ...

  9. 删除docker registry镜像脚本

    使用: 删除指定镜像:/usr/local/bin/delete_docker_registry_image -i 镜像名 删除指定镜像指定标签:/usr/local/bin/delete_docke ...

  10. 使用Python自带difflib模块进行文件内容差异对比

    difflib_text.py #!/usr/bin/python import difflib import sys try: textfile1=sys.argv[1] textfile2=sys ...