标签：js easy ui grid javascript html
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":"软件"}
]}标签：js easy ui grid javascript html
原文地址：http://blog.csdn.net/qq_19524879/article/details/39494375
