table2
/
table2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="plugins/table2/css/table2.css" rel="stylesheet" />
    <script src="plugins/jquery-1.12.4.js"></script>
    <script src="plugins/layui/layui.js"></script>
    <style>
        body {
            width: 70%;
            padding: 20px;
            margin: 0 auto;
        }
    </style>
    <script>

        $.fn.serializeJson = function () {
            var serializeObj = {};
            var array = this.serializeArray();
            $(array).each(function () {
                if (serializeObj[this.name]) {
                    if ($.isArray(serializeObj[this.name])) {
                        serializeObj[this.name].push(this.value);
                    } else {
                        serializeObj[this.name] = [serializeObj[this.name], this.value];
                    }
                } else {
                    serializeObj[this.name] = this.value;
                }
            });
            return serializeObj;
        };

        var data = [];
        var now = new Date(2017, 10, 1);
        var mm = now.getMinutes();

        function getNowFormatDate(date) {
            var seperator1 = "-";
            var seperator2 = ":";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year +
                seperator1 +
                month +
                seperator1 +
                strDate +
                " " +
                date.getHours() +
                seperator2 +
                date.getMinutes() +
                seperator2 +
                date.getSeconds();
            return currentdate;
        }

        for (var i = 1; i < 102; i++) {
            now.setMinutes(mm + i);
            var model = {
                Id: i,
                Subject: "我是Subject" + i,
                Body: "我是body" + i,
                Sex: "男",
                Name: "我是name" + i,
                Hobby: "我有很多爱好，打羽毛球，打篮球，打乒乓球，游泳，跑步，骑自行车，总之我要把这个表格撑大，撑大到换行",
                CreateTime: getNowFormatDate(now)
            }
            data.push(model);
        }

    </script>
</head>
<body>

    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">
table2.js使用说明：
表格支持定宽或自适应宽度，
使用方法
        layui.config({
            base: '自己项目下table2目录'
        }).use('table2', function () {
            table = layui.table2;
            //table初始化
            ......

        });

table属性option：
url：ajax请求路径
method：ajax请求方法，可选get|post，默认get
width：容器宽度，数值
height：容器高度，数值|full-数值|sel-jqselectors-数值(jqselectors选择器不支持-符号，因为需要按照-分割)。
             使用sel模式时，只需填写table下方的容器选择器，系统会自动剔除上方的dom高度，如果固定数值没有，请填写0，不能省略
minHeight： 表格最小高度，默认80
skin：皮肤，可选col|row|none，col：列边框风格，row：行边框风格，none：无边框风格
even：隔行换色，可选true|false，默认false
expandRow: 行是否允许展开，可选true|false，默认false。需要配合on("expand", function(){})使用
singleSelect：单选行，可选true|false，默认false，可以选中多行
nowrap：数据是否自动换行，默认true，不自动换行，填写true性能更高一下
localSort： 本地排序，默认true，不想使用本地排序，请配置成false；如果由后台排序建议配置成false
loading： 请求数据时，是否显示loading，默认true
cellMinWidth： 所有单元格默认最小宽度，默认60px
serialField：主键唯一字段，建议填写，否则删除数据的时候性能减弱，默认id，区分大小写
colspanDefs：数组，合并单元格，例如：["Name", "Body"]将会按照Name和Body进行单元格合并
page：是否分页，默认false，可选true，或则如下
    {
        align：对齐方式，可选left|right|center，默认left
        curr：当前页
        limit：每页显示的数量，默认10条
        limits：每页条数选择，默认[10, 20, 30, 40, 50, 60, 70, 80, 90]
    }

属性事件：
onAjaxBeforeSend(xhr)：和ajax beforeSend参数一致，此时this为本次ajax请求时传递的options参数。
                                        如果返回false可以取消本次ajax请求
onAjaxSuccess(result)：ajax成功请求数据时（table清除上次数据后），在这里可以做数据统一。
                                    需要返回json数据，格式为{code: 0, msg: '错误信息', count: 100, data: []},code为0时表示成功。
                                    此时this为本次ajax请求时传递的options参数
onAjaxError(xhr, textStatus, errorThrown)：和ajax error参数一致，此时this为本次ajax请求时传递的options参数

onBeforeAddRow(rowindex, data)： 添加行数据前返回行索引和行数据
onAddRow(rowindex, tr, data)： 添加行数据后返回行索引、行和行数据
onPageLimitChanged(preLimit, toLimit)：当每页条数发生变化时触发，preLimit为之前的页条数，toLimit为修改后条数
onPageJump(prePage, toPage)：页码跳转，进行数据请求绑定前，prePage为之前的页码，toPage为修改后的页码
onComplete(data)：所有处理完毕（table渲染数据结束），data为onAjaxSuccess返回的result数据


cols：属性
islink：此时取消点击单元格事件，可以使用a标签进行跳转
filed：绑定字段，需要显示的列必填，主标题副标题可不填
title：标题
sort：排序，可选true|false，默认false
width：宽度，可以是定宽，百分比；不填则自适应宽度
rowspan：行合并
colspan：列合并
resize：拖拽宽度，默认false
align：对齐方式
style：设置head样式，支持css所有样式，带小横线的需要用引号包起来，eg：style: { "font-size": "14px" }
dataStyle: 设定数据样式，只有包含field时才有效，带小横线的需要用引号包起来，eg：style: { "font-size": "14px" }
formatter(v, data, index)：数据格式化，传入一个函数比如操作列，v当前值，data当前行数据，index行号从0开始


tableIns方法：
reload：重新加载
getSelectedRows：获取选中行，返回数组，数据格式每个包含一个index，data，index为选中行序号，
                             从0开始，data为当前行数据，单选时注意使用list[0]
getData：获取table所有数据
on(event, callback)：事件绑定。event字符串，可选如下，callback为函数
    tool返回函数function(evt, obj)，evt为事件，obj包含index，data，tr，del，update，index为tr行号，
                                                     tr为dom对象，data为数据（只监听包含event的click事件）
    sort返回函数(initSort)，initSort对象包含：sortField排序字段，sortType排序方式，可选asc|desc
    expand返回函数(rowindex, data, container): 行展开时回调，rowindex：行数据前返回行索引，data行数据，
                                                                container为容器，需要返回一个字符串
    check返回函数(obj)：行选中，obj = {
                    type: "one",//all|one
                    index: -1,//行index，-1是全选无效
                    checked: true//true|false
                };


可全局配置参数：
table2.options：属性包含如下
        expandRow: false,
        nowrap: true,
        minHeight: 80,
        singleSelect: false,
        localSort: true,
        loading: true,
        cellMinWidth: 60,
        serialField: "id"


注意：
1、进行拖拽后，表格将不再自适应宽度
2、cols中同时设置style和dataStyle时align无效。并且不建议设置max-width，首先对td无效，再者禁止换行时数据和表头有1px之差
3、建议所有列书写一个minWidth，因为当数据允许换行时(nowrap=true时)，表头可能会被换行，不好看
4、

</pre>

    <h4>14、我是textarea，里面的iframe是鸠占鹊巢，内部table高度尽可能填充整个页面</h4>
    <h5>因为是用textarea模仿的拖拽，效果不大明显，可以<a href="tableSelDemo2.html" target="_blank">打开新页面查看</a>，调整浏览器窗口大小即可查看结果</h5>
    <div style="position: relative">
        <textarea id="textarea" style="width: 100%; min-height: 300px;"></textarea>
        <iframe id="iframe" src="tableSelDemo2.html" style="width: 100%; min-height: 300px; position: absolute; top: 0; left: 0; border: 0;padding:0" scrolling="auto"></iframe>
    </div>

    <h4>13、行可以展开，此时不建议书写固定列，详情会被覆盖</h4>
    <table id="table13"></table>

    <h4>12、合并单元格，把用户名和Subject上下行数值相同的单元格合并起来</h4>
    <table id="table12"></table>


    <h4>11、ajax请求数据，可以多选，我的高度是整个浏览器高度-300px</h4>
    <div>
        <div>
            <form id="form11">
                <input type="text" class="rayui-input" name="id" placeholder="请输入编号" />
                <input type="text" class="rayui-input" name="name" placeholder="请输入姓名" />
                <a class="rayui-btn rayui-btn-primary" id="query11">搜索</a>
                <a class="rayui-btn" id="reload11">重新加载</a>
                <a class="rayui-btn rayui-btn-success" id="getSelectRow11">获取选中行</a>
                <a class="rayui-btn rayui-btn-warning" id="resetData11">重置数据</a>
            </form>
        </div>
        <table id="table11"></table>
    </div>

    <h4>10、单行选中，默认是多选<a class="rayui-btn rayui-btn-primary" id="getSelectRow">获取选中行</a></h4>
    <table id="table10"></table>

    <h4>9、我可以排序，容器宽度700px，分页居右</h4>
    <table id="table9"></table>

    <h4>8、操作栏绑定事件，每页15条数据，内容可以换行</h4>
    <table id="table8"></table>

    <h4>7、单行表头固定列</h4>
    <table id="table7"></table>

    <h4>6、多行表头固定列</h4>
    <table id="table6"></table>

    <h4>
        5、多级表头，
        <span style="color: #f00">表头是红色的</span>，
        <span style="color: #159200">数据是绿色的</span>
        ，Subject表头居中，数据居右，此时align无效
    </h4>
    <table id="table5"></table>

    <h4>4、隐藏编号，允许换行，爱好自适应，<span style="color: #159200">数据是绿色的</span></h4>
    <table id="table4"></table>

    <h4>3、table所有列宽自适应，Subject可拖拽</h4>
    <table id="table3"></table>

    <h4>2、table所有列定宽</h4>
    <table id="table2"></table>

    <h4>1、我加载了本地数据，没有进行分页，隔行换色</h4>
    <table id="table1"></table>


    <h4>静态表格</h4>
    <table class="laytable">
        <thead>
            <tr>
                <th>用户名</th>
                <th>爱好</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是name1</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 09:32:15</td>
            </tr>
            <tr>
                <td>我是name2</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 05:21:15</td>
            </tr>
            <tr>
                <td>我是name3</td>
                <td>我有很多爱好，打乒乓球，游泳，跑步，骑自行车</td>
                <td>2018-01-03 02:32:15</td>
            </tr>
            <tr>
                <td>我是name4</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-02 12:02:15</td>
            </tr>
        </tbody>
    </table>

<script>
    var time1 = new Date().getTime();
    layui.config({
        base: 'Plugins/table2/'
    }).use(['table2', "table2"], function () {
        var table = layui.table2;

        console.log("加载耗时:" + (new Date().getTime() - time1));

        function initTable13() {
            var tableIns = table.render({
                elem: "#table13",
                data: data,
                height: 500,
                page: true,
                expandRow: true,
                cols: [
                    [
                        { title: 'asdfsd', colspan: 3 },
                        { title: 'asdfasdf', colspan: 3 }
                    ],
                    [
                        { field: 'Id', title: '编号', width: 50 },
                        { field: 'Name', title: '用户名', width: 120, align: 'left', sort: true },
                        { field: 'Subject', title: 'Subject', width: 120, align: 'center', resize: true },
                        { field: 'Hobby', title: '爱好', minWidth: 100, align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 150 },
                        {
                            field: 'opts', title: '操作', width: 150, align: 'center', resize: true, formatter: function () {
                                return '<a class="rayui-btn rayui-btn-danger" event="del">删除</a>&nbsp;<a class="rayui-btn rayui-btn-success" event="edit">编辑</a>';
                            }
                        }
                    ]]
            });
            tableIns.on("tool", function (evt, obj) {
                if (evt === "del") {
                    if (window.confirm("确定删除[" + obj.data.Name + "]吗？")) {
                        $.getJSON("data.ashx?action=DeleteData", { id: obj.data.Id }, function (data) {
                            if (data.ret === 0)
                                obj.del();
                            else
                                alert("删除失败");
                        });
                    }
                } else if (evt === "edit") {
                    var name = window.prompt("请输入姓名", obj.data.Name);
                    if (name != null) {
                        obj.data.Name = name;
                        obj.update();
                    }
                }
            });
            tableIns.on("expand", function (index, rowdata, $container) {
                if (index % 2 === 0) {
                    return [
                        '<div>我是详情页面</div>',
                        '<div>用户名:' + rowdata.Name + '</div>',
                        '<div>编号:' + rowdata.Id + '</div>',
                        '<div>Subject:' + rowdata.Subject + '</div>',
                        '<div>爱好:' + rowdata.Hobby + '</div>'
                    ].join('');
                } else {
                    var id = "tableDetail" + index ;
                    $container.append('<table id="'+id+'"></table>');
                    table.render({
                        elem: "#" + id,
                        data: data.slice(0, 2),
                        width: $container.width(),
                        cols: [[
                            { field: 'Id', title: '编号', width: 50},
                            { field: 'Name', title: '用户名', width: 120, align: 'left'},
                            { field: 'Subject', title: 'Subject', width: 120, align: 'center', resize: true },
                            { field: 'Hobby', title: '爱好', minWidth: 100, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 150 }
                        ]]
                    });
                }
            });
        }

        function initTable12() {
            var dataTmp = [];
            for (var i = 1; i < 102; i++) {
                now.setMinutes(mm + i);
                var model = {
                    Id: i,
                    Name: "我是name" + Math.round(i / 2),
                    Subject: "我是Subject" + Math.round(i / 2),
                    Body: "我是body" + i,
                    Sex: "男",
                    Hobby: "我有很多爱好，打羽毛球，打篮球，打乒乓球，游泳，跑步，骑自行车，总之我要把这个表格撑大，撑大到换行",
                    CreateTime: getNowFormatDate(now)
                }
                dataTmp.push(model);
            }

            var tableIns = table.render({
                elem: "#table12",
                data: dataTmp,
                height: 300,
                colspanDefs: ["Name", "Subject"],
                cols: [[
                    { field: 'Id', title: '编号', width: 120, fixed: 'left' },
                    { field: 'Name', title: '用户名', width: 150, align: 'left', sort: true, fixed: 'left' },
                    { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                    { field: 'Hobby', title: '爱好', width: 150, align: 'center', resize: true },
                    { field: 'Body', title: 'Body', width: 150 },
                    {
                        field: 'opts', title: '操作', width: 150, fixed: 'right', align: 'center', resize: true, formatter: function () {
                            return '<a class="rayui-btn rayui-btn-danger" event="del">删除</a>&nbsp;<a class="rayui-btn rayui-btn-success" event="edit">编辑</a>';
                        }
                    }
                ]]
            });

            tableIns.on("tool", function (evt, obj) {
                if (evt === "del") {
                    if (window.confirm("确定删除吗？")) {
                        $.getJSON("data.ashx?action=DeleteData", { id: obj.data.Id }, function (data) {
                            if (data.ret === 0)
                                obj.del();
                            else
                                alert("删除失败");
                        });
                    }
                } else if (evt === "edit") {
                    var name = window.prompt("请输入姓名", obj.data.Name);
                    if (name != null) {
                        obj.data.Name = name;
                        obj.update();
                    }
                }
            });
        }

        function initTable11() {
            var tableIns = table.render({
                elem: "#table11",
                url: "/Data.ashx?action=GetList",
                method: "post",
                height: 'full-300',
                //singleSelect: true,
                serialField: "Id",
                page: true,
                even: true,
                initSort: {
                    sortField: 'Id',
                    sortType: 'asc'
                },
                cols: [
                    [
                        { field: 'chk', width: 60, align: 'center', fixed: 'left' },
                        { field: 'Id', title: '编号', width: 60, fixed: 'left', sort: true, resize: true },
                        { field: 'Name', title: '用户名', width: 150, align: 'center', fixed: 'left' },
                        { field: 'Subject', title: 'Subject', minWidth: 100, align: 'center', sort: true, resize: true },
                        {
                            field: 'Sex', title: '性别', width: 100, align: 'center', resize: true, formatter: function (data) {
                                return data.Sex ? "男" : "女";
                            }
                        },
                        { field: 'Hobby', title: '爱好', width: 250, align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 150, resize: true },
                        { field: 'CreateTime', title: '时间', width: 165, sort: true },
                        {
                            field: 'opts', title: '操作', width: 150, fixed: 'right', align: 'center', resize: true, formatter: function () {
                                return '<a class="rayui-btn rayui-btn-danger" event="del">删除</a>&nbsp;<a class="rayui-btn rayui-btn-success" event="edit">编辑</a>';
                            }
                        }
                    ]
                ],
                onPageLimitChanged: function (preLimit, currLimit) {
                    alert("每页条数从每页 " + preLimit + " 条 改变为 每页 " + currLimit + " 条");
                },
                onPageJump: function (prePage, currPage) {
                    alert("从第 " + prePage + " 页 跳转到 第 " + currPage + " 页");
                }

            });

            tableIns.on("tool", function (evt, obj) {
                if (evt === "del") {
                    if (window.confirm("确定删除吗？")) {
                        $.getJSON("data.ashx?action=DeleteData", { id: obj.data.Id }, function (data) {
                            if (data.ret === 0)
                                obj.del();
                            else
                                alert("删除失败");
                        });
                    }
                } else if (evt === "edit") {
                    var name = window.prompt("请输入姓名", obj.data.Name);
                    if (name != null) {
                        obj.data.Name = name;
                        obj.update();
                    }
                }
            });

            $("#query11").click(function () {
                tableIns.reload({
                    where: $("#form11").serializeJson()
                });
            });

            $("#reload11").click(function () {
                tableIns.reload({ page: { curr: 1 } });
            });

            $("#getSelectRow11").click(function () {
                var list = tableIns.getSelectedRows();
                alert(JSON.stringify(list));
            });

            $("#resetData11").click(function () {
                $.getJSON("data.ashx?action=ResetData",
                    function (data) {
                        if (data.ret === 0)
                            alert("操作成功");
                        else
                            alert("操作失败");

                    });
            });

        }

        function initTable10() {
            var tableIns = table.render({
                elem: "#table10",
                data: data,
                singleSelect: true,
                height: 300,
                page: true,
                initSort: {
                    sortField: 'Id',
                    sortType: 'asc'
                },
                cols: [
                    [
                        { field: 'chk', width: 60, align: 'center', fixed: 'left' },
                        { field: 'Id', title: '编号', width: 60, fixed: 'left', sort: true },
                        { field: 'Name', title: '用户名', width: 100, align: 'center', fixed: 'left' },
                        { field: 'Subject', title: 'Subject', minWidth: 100, align: 'center', sort: true, resize: true },
                        { field: 'Sex', title: '性别', width: 100, align: 'center', resize: true },
                        { field: 'Hobby', title: '爱好', width: 250, align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 150, resize: true },
                        { field: 'CreateTime', title: '时间', width: 165, sort: true },
                        {
                            field: 'opts',
                            title: '操作',
                            width: 150,
                            fixed: 'right',
                            align: 'center',
                            resize: true,
                            formatter: function () {
                                return '<a class="rayui-btn rayui-btn-danger" event="del">删除</a>&nbsp;<a class="rayui-btn rayui-btn-success" event="edit">编辑</a>';
                            }
                        }
                    ]
                ]
            });

            tableIns.on("tool", function (evt, obj) {
                if (evt === "del") {
                    if (window.confirm("确定删除吗？"))
                        obj.del();
                } else if (evt === "edit") {
                    alert('您选中了第' + index + '行');
                }
            });

            tableIns.on("check", function (obj) {
                alert("点击了第" + obj.index + "行，状态：" + obj.checked);
            });

            $("#getSelectRow").click(function () {
                var list = tableIns.getSelectedRows();
                alert(JSON.stringify(list));
            });
        }

        function initTable9() {
            var tableIns = table.render({
                elem: "#table9",
                data: data,
                height: 300,
                width: 700,
                initSort: {
                    sortField: 'Id',
                    sortType: 'desc'
                },
                page: {
                    align: 'right',
                    limit: 20,
                    local: true
                },
                cols: [
                    [
                        { field: 'Id', title: '编号', width: 60, fixed: 'left', sort: true },
                        { field: 'Name', title: '用户名', width: 120, align: 'center', fixed: 'left' },
                        { field: 'Subject', title: 'Subject', minWidth: 100, align: 'center', sort: true, resize: true },
                        { field: 'Sex', title: '性别', width: 80, align: 'center', resize: true },
                        { field: 'Hobby', title: '爱好', width: 240, align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 120, resize: true },
                        { field: 'CreateTime', title: '时间', width: 165, sort: true },
                        {
                            field: 'opts',
                            title: '操作',
                            width: 125,
                            fixed: 'right',
                            align: 'center',
                            resize: true,
                            formatter: function () {
                                return '<a class="rayui-btn rayui-btn-danger" event="del">删除</a>&nbsp;<a class="rayui-btn rayui-btn-success" event="edit">编辑</a>';
                            }
                        }
                    ]
                ]
            });

            tableIns.on("tool",
                function (evt, obj) {
                    if (evt === "del") {
                        if (window.confirm("确定删除吗？"))
                            obj.del();
                    } else if (evt === "edit") {
                        alert('您选中了第' + index + '行');
                    }
                });
        }

        function initTable8() {
            var tableIns = table.render({
                elem: "#table8",
                data: data,
                nowrap: false,
                height: 400,
                page: {
                    local: true,
                    limit: 15
                },
                cols: [
                    [
                        { field: 'Id', title: '编号', width: 60, fixed: 'left' },
                        { field: 'Name', title: '用户名', width: 120, align: 'center', fixed: 'left' },
                        { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                        { field: 'Sex', title: '性别', width: 60, align: 'center' },
                        { field: 'Hobby', title: '爱好', minWidth: 240, align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 120, resize: true },
                        {
                            field: 'opts',
                            title: '操作',
                            width: 125,
                            fixed: 'right',
                            align: 'center',
                            formatter: function () {
                                return '<a class="rayui-btn rayui-btn-danger" event="del">删除</a>&nbsp;<a class="rayui-btn rayui-btn-success" event="edit">编辑</a>';
                            }
                        }
                    ]
                ]
            });
            tableIns.on("tool", function (evt, obj) {
                if (evt === "del") {
                    obj.del();
                } else if (evt === "edit") {
                    alert('您选中了第' + index + '行');
                }
            });
        }

        function initTable7() {
            var tableIns = table.render({
                elem: "#table7",
                data: data,
                height: 300,
                even: true,
                page: {
                    local: true
                },
                cols: [
                    [
                        { field: 'Id', title: '编号', width: 60, fixed: 'left' },
                        {
                            field: 'Name', title: '用户名', width: 150, align: 'center', fixed: 'left', resize: true, islink: true, formatter: function (v) {
                                return "<a target='_blank' href='http://www.baidu.com'>" + v + "，我是链接可以点击</a>";
                            }
                        },
                        { field: 'Hobby', title: '爱好', width: 150, align: 'center', resize: true },
                        { field: 'Subject', title: 'Subject', width: 150, align: 'center' },
                        { field: 'Sex', title: '性别', width: 150, align: 'center' },
                        { field: 'Body', title: 'Body', width: 120, fixed: 'right' }
                    ]
                ]
            });
        }

        function initTable6() {
            var tableIns = table.render({
                elem: "#table6",
                data: data,
                height: 400,
                even: true,
                page: {
                    local: true
                },
                cols: [
                    [
                        { title: '我是主标题在最上面', align: 'center', colspan: 6 }
                    ],
                    [
                        { title: '左侧固定', colspan: 2, fixed: 'left' },
                        { title: '我是副标题', align: 'center', colspan: 2 },
                        { title: '右侧固定', align: 'center', colspan: 2 }
                    ],
                    [
                        { field: 'Id', title: '编号', width: 60, fixed: 'left' },
                        { field: 'Name', title: '用户名', width: 150, align: 'center', fixed: 'left', resize: true },
                        { field: 'Subject', title: 'Subject', minWidth: 100, align: 'center', resize: true },
                        { field: 'Sex', title: '性别', width: 50, align: 'center' },
                        { field: 'Hobby', title: '爱好', minWidth: 150, align: 'center' },
                        { field: 'Body', title: 'Body', width: 150, fixed: 'right', resize: true }
                    ]
                ]
            });
        }

        function initTable5() {
            var tableIns = table.render({
                elem: "#table5",
                data: data,
                height: 400,
                page: {
                    local: true
                },
                cols: [
                    [
                        { title: '我是主标题在最上面', align: 'center', width: 120, colspan: 5 }
                    ],
                    [
                        { field: 'Id', title: '编号', width: 60, rowspan: 2 },
                        {
                            title: '我是副标题在下面，我字号小一点，同时我是红色的',
                            align: 'center',
                            width: 120,
                            colspan: 4,
                            style: { "font-size": "14px", color: "#f00" }
                        }
                    ],
                    [
                        { field: 'Name', title: '用户名', width: 120, align: 'left', dataStyle: { color: "#159200" } },
                        {
                            field: 'Subject',
                            title: 'Subject',
                            align: 'left',
                            style: { "text-align": "center" },
                            dataStyle: { "text-align": "right" } //此时align无效
                        },
                        { field: 'Hobby', title: '爱好', align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 120 }
                    ]
                ]
            });
        }

        function initTable4() {
            var tableIns = table.render({
                elem: "#table4",
                data: data,
                nowrap: false,
                height: 300,
                cols: [[
                    { field: 'Id', title: '编号', width: 50, hidden: true },
                    { field: 'Name', title: '用户名', width: 150 },
                    { field: 'Subject', title: 'Subject', width: 150, align: 'center' },
                    { field: 'Hobby', title: '爱好', minWidth: 100, align: 'center', resize: true, dataStyle: { color: '#159200' } },
                    { field: 'Body', title: 'Body', width: 150, fixed: 'right' }
                ]]
            });
        }

        function initTable3() {
            var tableIns = table.render({
                elem: "#table3",
                data: data,
                height: 300,
                page: true,
                cols: [[
                    { field: 'Id', title: '编号', rowspan: 2 },
                    { field: 'Name', title: '用户名', align: 'left' },
                    { field: 'Subject', title: 'Subject', align: 'center', resize: true },
                    { field: 'Body', title: 'Body' }
                ]]
            });
        }

        function initTable2() {
            var tableIns = table.render({
                elem: "#table2",
                data: data,
                height: 300,
                page: true,
                cols: [
                    [
                        { field: 'Id', title: '编号', width: 120, rowspan: 2 },
                        { field: 'Name', title: '用户名', width: 100, align: 'left' },
                        { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 150 }
                    ]
                ]
            });
        }

        function initTable1() {
            var dataTmp = [], index = 0;
            while (index < 25) {
                dataTmp.push(data[index++]);
            }
            var tableIns = table.render({
                elem: "#table1",
                data: dataTmp,
                height: 300,
                even: true,
                cols: [
                    [
                        { field: 'Id', title: '编号', width: 120 },
                        { field: 'Name', title: '用户名', width: 100, align: 'left' },
                        { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                        { field: 'Hobby', title: '爱好', minWidth: 150, align: 'center', resize: true },
                        { field: 'Body', title: 'Body', width: 150 }
                    ]
                ]
            });
        }

        initTable1();
        initTable2();
        initTable3();
        initTable4();
        initTable5();
        initTable6();
        initTable7();
        initTable8();
        initTable9();
        initTable10();
        initTable11();
        initTable12();
        initTable13();

        $(function () {
            $("#query").click(function () {

            });
            $("#textarea").on("mouseenter mousemove mouseleave", function () {
                $("#iframe").height($(this).height()).width($(this).width());
            });
        });
    });
</script>


</body>
</html>