easy ui JS 实现Grid

easy ui的grid的实现方式有两种 

1.是在网页中实现 （这里不说了 我感觉还是在js中实现操作起来比较方便）

2.在JS中实现

好了我们就来说说如何在JS中实现的GRID

第一步就是我们要引用easy ui 的JS  

<script type="text/javascript" src="../JS/jquery.min.js"></script><script type="text/javascript" src="../JS/jquery.easyui.min.js"></script>

好了 下面就是HTML 的代码

<table id="dg"></table> 

只需要给一个 table定义一个ID

好啦我们开始定义我们JS里面的grif的实现方法

var lastIndex;function datagridload(){$('#dg').datagrid({     rownumbers:true,singleSelect:true,pagination:true,//分页空间        url:'datagrid_data1.json',          loadMsg:"正在努力加载数据，请稍后...",title:'家庭人员列表(*红色字体为年龄较小人员)',          nowrap: true,        striped : true,        border: true,         collapsible:false,//是否可折叠的          remoteSort:false,        idField:'fldId', height:500,    columns:[[            {field:'code',title:'登陆名称',width:50},            {field:'name',title:'姓名',width:100},            {field:'age',title:'年龄',width:20,align:'right'} ,{field:'six',title:'性别',width:20,align:'right'}  ,{field:'birthday',title:'生日',width:100,align:'right'}  ,{field:'idnumber',title:'证件号码',width:100,align:'right'}  ,{field:'phone1',title:'联系方式1',width:100,align:'right'},{field:'phone2',title:'联系方式2',width:100,align:'right'}  ,{field:'status',title:'状态',width:40,align:'right'} , {field:'fposition',title:'家庭职位',width:100,align:'right'},{field:'industry',title:'从事行业',width:100,align:'right'}    ]] , rowStyler: function(index,row){                    if (row.age < 20){                        return 'color:red;font-weight:bold;';                    }                },toolbar: [{text:'新增用户',iconCls: 'icon-add',handler: adduser},'-',{text:'修改用户',iconCls: 'icon-edit',handler: function(){ var row = $('#dg').datagrid('getSelected');//获取选中行 if(row==null){          $.messager.alert('提示','请选择一行信息!','warning');      }else{       updateuser();  }}},'-',{text:'删除用户',iconCls: 'icon-remove',handler: function(){ var row = $('#dg').datagrid('getSelected');//获取选中行 if(row==null){          $.messager.alert('提示','请选择一行信息!','warning');      }else{  $.messager.confirm('提示','确定要删除'+row.name+'用户！',deleteuser);  }}}] ,onClickRow:function(rowIndex){                      if (lastIndex != rowIndex){                          $('#dg').datagrid('endEdit', lastIndex);                          $('#dg').datagrid('beginEdit', rowIndex);                      }                      lastIndex = rowIndex;                 },onSelect:function(rowIndex,rowData){//用户选择一行触发事件 //alert('Item ID:'+rowData.code+"\nPrice:"+rowData.name);}});var p = $('#dg').datagrid('getPager');      $(p).pagination({          pageSize: 10,//每页显示的记录条数，默认为10          pageList: [5,10,15],//可以设置每页记录条数的列表loading:true,        beforePageText: '第',//页数文本框前显示的汉字          afterPageText: '页    共 {pages} 页',          displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',          /*onBeforeRefresh:function(){             $(this).pagination('loading');             alert('before refresh');             $(this).pagination('loaded');         }*/onSelectPage:function(pageNumber, pageSize){var url="datagrid_data"+pageNumber+".json";//把URL的路径经过Ajax传入后台    $('#dg').datagrid('load',url);  }    }); }

分页的实现也在里面 可以研究一下有兴趣的

下面就是JS的加载了

$(document).ready(function(){  //JS加载datagridload();});

好了 我们就实现了简单的grid加载数据了

在说一下 我们的JSON文件 格式

{"total":13,"rows":[{"code": "xiaxia","name":"haha","age":"24","six":"女","birthday":"1991-02-22","idnumber":"3203211199108134216","phone1":"12345666445","phone2":"","status":"无","fposition":"家人","industry":"会计"},{"code": "xiaokang","name":"huhu","age":"24","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"lisi","age":"15","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"王武","age":"60","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"1212","age":"11","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"黑色的机会","age":"77","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"hdjh ","age":"77","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"dfgdfgdf","age":"77","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"ereer","age":"78","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"},{"code": "xiaokang","name":"dsffd","age":"77","six":"男","birthday":"1991-08-13","idnumber":"3203211199108134216","phone1":"18361912397","phone2":"","status":"无","fposition":"家人","industry":"软件"}]}