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属性冻结列

posted @ 2018-12-05 16:57 风拂晚柳阅读(2232) 评论(0) 收藏举报

刷新页面返回顶部