EasyUI学习-----创建DataGrid及冻结列的两种方式

   第一种方式:通过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属性冻结列

转载于:https://www.cnblogs.com/fengfuwanliu/p/10071936.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值