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":"软件"}
]}