第一种方式：通过HTML标签创建数据表格控件
<table class="easyui-datagrid" title="基本数据表格" style=" 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',100">学生ID</th> <th data-options="field:'stuName',100">学生姓名</th> </tr> </thead> <thead> <tr> <th data-options="field:'stuSex',100">学生性别</th> <th data-options="field:'stuAge',100">学生年龄</th> <th data-options="field:'stuEmail',100,align:'center'">学生邮箱</th> <th data-options="field:'stuQQ',100,align:'right'">学生QQ</th> <th data-options="field:'stuAddress',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属性冻结列