第一种方式：通过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. Appium入门（9）—— Appium API

    摘自:http://www.testclass.net/appium/appium-base-api-01/ 1.安装: installApp() driver.installApp("d: ...

  2. mysql之索引简介

    索引分类 mysql在存储数据时,是按着主键的顺序存储的.主键索引是物理索引,其他索引都是逻辑索引. 普通索引 普通索引是最基本的索引,没有任何限制的索引,普通索引列的数据可以重复.其唯一的任务就是加 ...

  3. 原生js获取到页面上所有的checkbox

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. [phomeflashpic]怎样调用帝国CMS图片幻灯效果

    今天改网站时试着用帝国cms的[phomeflashpic]标签调用图片作为首页幻灯片,默认是[phomeflashpic]0,3,300,235,0,0,13,3[/phomeflashpic],其 ...

  5. axios post、get 请求参数和headers配置

    axios.post("http://xxx.com/xxx/xxx/xxx?", { 'queslistid':this.kemuid }, { headers: {'token ...

  6. Java通过jxl读取Excel

    package com.hd.all.test.testjava; import java.io.File; import java.io.IOException; import java.util. ...

  7. 【设计模式】用追MM来解释23种设计模式，转

    创建型模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德基 ...

  8. [LeetCode] 434. Number of Segments in a String_Easy

    Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...

  9. js快速排序算法解析

    数组的快速排序算法,和并归排序步骤基本类似. 都是先拆分,后合并.并归排序是:拆分容易,合并难. 快速排序是:拆分难,合并容易 要理解快速排序,首先要理解拆分逻辑 要素:找一个基准点,通过操作使得数列 ...

  10. 数据分析与挖掘 - R语言：贝叶斯分类算法（案例一）

    一个简单的例子!环境:CentOS6.5Hadoop集群.Hive.R.RHive,具体安装及调试方法见博客内文档. 名词解释: 先验概率:由以往的数据分析得到的概率, 叫做先验概率. 后验概率:而在 ...