jeasyui中的datagrid例子

<%@page language="java" pageEncoding="UTF-8"
 contentType="text/html;charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
 href="<%=request.getContextPath()%>/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
 href="<%=request.getContextPath()%>/themes/icon.css">
<script type="text/javascript"
 src="<%=request.getContextPath()%>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
 src="<%=request.getContextPath()%>/js/jquery.easyui.min.js"></script>
<script type="text/javascript"
 src="<%=request.getContextPath()%>/js/easyui-lang-zh_CN.js"></script>
<script>
 $(function() {
  $('#dg').datagrid({
   width : 100,
   height : 100,
   nowrap : false,//内容不换行  
   rownumbers : true,//行号  
   animate : true,//动画效果  
   collapsible : true,//是否折叠  
   rownumbers : true,
   pagination : true,
   pageSize : 1,
   pageList : [ 10, 15, 30 ],
   idField : 'field1',
   checkbox : true,
   singleSelect : true,
   fitColumns : true,
   fit : true,
   toolbar : '#toolbar',
   columns : [ [ {
    field : 'field1',
    title : '故障描述',
    checkbox : false,
    width : 250,
    align : 'left',
    halign : 'center'
   }, {
    field : 'field2',
    title : '发起人',
    width : 250,
    align : 'left',
    halign : 'center'
   }, {
    field : 'field3',
    title : '发起时间',
    width : 250,
    align : 'left',
    halign : 'center'
   } ] ],
   data :[
 {"field1":"设计图纸1","field2":"张三","field3":"2004/10/12 09:12:10"},
 {"field1":"设计图纸2","field2":"王五","field3":"2004/10/12 09:30:10"}
],

   onDblClickRow : function(row) {
    alert(row.field1);
    window.location.href = '<%=request.getContextPath()%>/fault/diagnosis/edit';
   }
  });
 });
</script>
</head>

<body>
 <div style="width: 100%; height: 600px;">
  <table id="dg">
  </table>
 </div>
 <div id="toolbar">
  <table>
   <tr>
    <td><input type="button" value="新建" onclick="newUser()" /></td>
    <td><input type="button" value="修改" onclick="newUser()" /></td>
    <td><input type="button" value="删除" onclick="newUser()" /></td>
   </tr>
  </table>
 </div>
</body>
</html>

 

你可能感兴趣的:(datagrid)