EasyUI學習-----創建DataGrid及凍結列的兩種方式

本文轉載自查看原文 2018-12-05 16:57 1413 EasyUI

第一種方式：通過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屬性凍結列

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 easyui datagrid加載數據的兩種方式 easyUI之datagrid綁定后端返回數據的兩種方式使用easyUI 為datagrid凍結列使用easyUI 為datagrid凍結列 EasyUI 之 DataGrid的兩種賦值方法 easyui datagrid 右凍結、右側凍結、凍結右邊列、凍結右側列 Easyui 創建dialog的兩種方式，以及他們帶來的問題 easyui datagrid 右凍結用JavaScript方式創建easyUI datagrid Column Group（列組） python threading 兩種創建方式