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

easy ui JS 实现Grid相关推荐

jquery ui和easy ui联合使用
本文以jquery ui中的自动完成(autocomplete)插件, easy ui中的(tree)树形菜单插件,(grid)网格插件的综合运用为例来展示插件的魅力. 开发环境:struts2.3 ...
Jquery Easy UI Datagrid 上下移动批量保存数据
DataGrid with 上下移动批量保存数据通过前端变量保存修改数据集合,一次性提交后台执行本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...
第四十四课：jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
7个jquery easy ui 基本组件图解
下面给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head><meta charset=&q ...
easy ui dialog 关闭之后的怪异问题
最近在工作中使用easy ui做东西,然后发现了一些不可思议的现象,笔记一下,前事不忘后事之师! 事故现场: 增加页面和修改页面是分离的两个jsp文件. 在页面加载时会用jquery去控制一些数据加载 ...
jQuery Easy UI ProgressBar（进度条）组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...
jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
初学jQuery Easy UI的总结
1.使用jQuery Easy UI的目的: jQuery Easy UI是一组基于jQuery的UI插件集合,而jQuery Easy UI 的目标就是帮助Web开发者更轻松的打造出功能丰 ...
用Easy UI快速搭建一个后台
今天来分享一个我前端技术-------如何使用Easy UI快速搭建一个后台,本博主也只是在官网文档学习了一个小时左右,就已经会使用了,当你学了Easy UI后,一个后台短短两分钟就可以over了,好 ...

easy ui JS 实现Grid

easy ui JS 实现Grid相关推荐

最新文章

热门文章