第一种方式：通过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. scala语法

    1:双重for循环(相当于j是i的内存循环):for (i <-0 to n; j <-10 to 20){ println(i);println(j)} 2:单层for循环:for (i ...

  2. 如何在安装node\npm\cnpm

    1.安装node.js node.js的官方地址为:https://nodejs.org/en/download/. 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用 ...

  3. pyqt5_eric6_Qt desinger

    麦子学院视频教程day1 1.创建pushbutton 绑定信号和槽 Ui_mainWindow.py 1 from PyQt5 import QtCore, QtGui, QtWidgets cla ...

  4. 【Mock】mock-server 环境搭建

    前言 mock 除了用在单元测试过程中,还有一个用途,当前端开发在开发页面的时候,需要服务端提供 API 接口 此时服务端没开发完成,或者说没搭建测试环境,这个时候前端开发会自己 mock一个 api ...

  5. [转载]智能科普：VR、AR、MR的区别

    智能科普:VR.AR.MR的区别 http://news.zol.com.cn/553/5534833.html news.zol.com.cn 2015-11-23 16:00 近日, 获得谷歌5亿 ...

  6. loadrunner压测工具

    https://www.cnblogs.com/xxyBlogs/p/4579509.html https://www.cnblogs.com/jaazz/p/8668214.html

  7. 前端 HTML body标签相关内容

    想要在网页上展示出来的内容一定要放在body标签中. 常用标签: 标题标签 h1-h6 段落标签 p标签 超链接标签 a标签 列表标签 ul,ol,li 定义列表<dl> 子标签 div ...

  8. 林兴爆料小程序很快可以支持各个 App 直接打开小程序

    在微信开放平台基础高级产品经理林兴演讲的当场,他爆料了微信小程序一个轰动性新能力:小程序很快可以支持各个 App 直接打开小程序!没错,你没有听错,简单来说,在不久以后,所有的 App 里面都可以看到 ...

  9. 20181211 Oracle Parallel

    如下用Select作为参考, Select 在sql server中如果直接查询大量的数据,方式为给列增加Index,可以提高效率.如果查询数据量非常大的时候其实效率依旧不高,而且index在增删改中 ...

  10. kafka5 编写简单生产者

    一 客户端 1.打开eclipse,新建maven项目(new-->other-->Maven Project-->Artifact Id设为mykafka). 2.配置Build ...