Easy UI常用插件使用
一、easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree、datagrid...
tree插件:
语法:$(selector).tree([settings]);
常用属性:
常用方法、事件:
使用tree插件实现树形菜单:
客户端页面关键代码:
① 引入easy UI插件及样式文件
② 定义用来配置树形菜单的区域
③ 使用tree方法加载远程树形菜单数据
<script type="text/javascript">
$(function() {
$("#easyui-tree").tree({
checkbox : true,
url : 'basic_tree_date.json',
onBeforeLoad : function(node, param) {
//alert('开始请求数据')
},
onLoadSuccess : function(node, data) {
//alert('数据请求成功')
},
onLoadError : function() {
//alert('加载失败')
},
onClick : function(node) {
//获取指定的节点对象
$('#easyui-tree').tree('getNode',node.target)
//alert($('#easyui-tree').tree('getNode',node.target).id)
//获取指定的节点数据,包括子节点
console.log($('#easyui-tree').tree('getData',node.target)) //获取根节点,返回节点对象
console.log($('#easyui-tree').tree('getRoot',node.target)) console.log($('#easyui-tree').tree('getParent',node.target)) //获取子节点
console.log($('#easyui-tree').tree('getChildren',node.target)) //指定节点进行添加操作
/* if( $('#easyui-tree').tree('getChildren',node.target).length==0){
$('#easyui-tree').tree('append',{
parent:node.target,
data:[{text:'呵呵'}]
})
} */ }, onlyLeafCheck : false,
//随意拖动
dnd : true,
}); }); function bs() {
//加载tree数据
$('#easyui-tree').tree('loadData',[{text:'number11'}]) //重新加载树的数据
$("#easyui-tree").tree('reload') //获取所有勾选选中的节点
console.log($('#easyui-tree').tree('getChecked')) //获取所有选中的节点
console.log($('#easyui-tree').tree('getSelected')) //根据id属性值找到该节点
console.log($('#easyui-tree').tree('find',12)) //选中一个节点
var node= $('#easyui-tree').tree('find',12);
$('#easyui-tree').tree('select',node.target); //选中
var node= $('#easyui-tree').tree('find',12);
$('#easyui-tree').tree('check',node.target); //指定节点不选中
var node= $('#easyui-tree').tree('find',12);
$('#easyui-tree').tree('uncheck',node.target); //指定节点折叠
var node= $('#easyui-tree').tree('find',1);
$('#easyui-tree').tree('collapse',node.target); //展开所有节点
$('#easyui-tree').tree('expandAll')
}
</script>
④ 创建服务器端basic_tree_date.json--待加载的远程树形菜单数据
Node对象参数:
tree数据节点:
basic_tree_date.json:
实现效果:
datagrid插件:
语法:$(selector).datagrid([settings]);
参数settings:用于配置datagrid的键值对集合
常用属性:
常用方法:
常用事件:
Column对象常用属性:是一个数组对象,它的每个元素也是一个数组。它定义了每个列的字段。
① 客户端页面代码:datagrid2.jsp
引入easy UI插件及样式文件
② 定义用来放置数据列表的区域
③ 使用datagrid方法创建列表组件展示远程数据
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
//远程请求数据的url路径
url:'<%=path%>/datagrid/datagrid_server.jsp',
width:800,
height:300,
//表头的小头标
iconCls:'icon-search',
//显示行号
rowNumbers:true,
//显示底部分页栏
pagination:true,
//默认显示每页记录数
pageSize:5,
pageList:[5,10,15],
//指定列
columns:[[
{field:'ck',checkbox:true},
{field:'title',title:'投票标题',width:408},
{field:'options',title:'备选项数',width:60,align:'center'},
{field:'participants',title:'参与人数',width:60,align:'center'}
]],
loadMsg:"正努力为您加载中......",
//只允许选中一行
singleSelect:true,
//隔行变色
striped:true,
rownumbers:true, }); });
</script>
④ 创建列表数据工具类CridNode:封装属性,并定义无参和带参构造
public class CridNode { private Long id;// 投票id
private String title;// 投票标题
private String options;// 备选项数
private String participants;// 参选人数 public CridNode() { } public CridNode(Long id, String title, String options, String participants) {
super();
this.id = id;
this.title = title;
this.options = options;
this.participants = participants;
} public Long getId() {
return id;
}
public void setId(Long id) {
this.id = id;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getOptions() {
return options;
}
public void setOptions(String options) {
this.options = options;
}
public String getParticipants() {
return participants;
}
public void setParticipants(String participants) {
this.participants = participants;
}
⑤服务器端代码:datagrid_server.jsp 根据分页参数获取待加载的列表数据
<%
//构造测试数据
List<CridNode> list = new ArrayList<CridNode>();
list.add(new CridNode(1L, "选出你心目中最好的下载工具", "2", "6"));
list.add(new CridNode(2L, "选出你心目中最好的输入法", "5", "4"));
list.add(new CridNode(3L, "选出你心目中最好的浏览器", "5", "11"));
list.add(new CridNode(4L, "选出你心目中最好的杀毒软件", "6", "4"));
list.add(new CridNode(5L, "选出你心目中最好的社交软件", "3", "14"));
list.add(new CridNode(6L, "选出你心目中最好的聊天工具", "3", "2"));
list.add(new CridNode(7L, "选出你心目中最好的翻译软件", "5", "0"));
list.add(new CridNode(8L, "选出你心目中最好的播放器", "2", "23"));
list.add(new CridNode(9L, "选出你心目中最好的免费软件", "4", "7"));
list.add(new CridNode(10L, "选出你心目中最好的录音软件", "4", "18"));
list.add(new CridNode(11L, "选出你心目中最好的刷机软件", "5", "6")); //获取客户端传递的分页参数
// 默认参数rows表示每页显示记录条数, 默认参数page表示当前页数 Integer pageSize=Integer.parseInt(request.getParameter("rows")); Integer pageNumber=Integer.parseInt(request.getParameter("page")); //默认参数page表示当前页数
StringBuilder builder = new StringBuilder("{\"total\":"+ list.size() + ",\"rows\":[");
//计算开始记录数
int start = (pageNumber - 1) * pageSize;
//计算结束记录数
int end = start + pageSize;
//根据分页起始参数构建当前页的列表数据
for (int i = start; i < end && i < list.size(); i++) {
CridNode gn = list.get(i);
builder.append("{\"id\":\"" + gn.getId() + "\",\"title\":\""+ gn.getTitle()
+ "\",\"options\":" + gn.getOptions()
+ ",\"participants\":" + gn.getParticipants() + "},");
}
String gridJSON = builder.toString();
if (gridJSON.endsWith(",")) {
gridJSON = gridJSON.substring(0, gridJSON.lastIndexOf(","));
} out.print(gridJSON + "]}");
%>
实现效果:
Easy UI常用插件使用的更多相关文章
- Jquery UI 和Easy UI常用插件
一.Jquery的插件简介 (一)什么是插件 插件(Plug-in)是一种遵循一定的应用程序接口规范编写出来的程序,是原有系统平台或应用软件平台功能的一种扩展和补充. 注意!!其只能在程序规定的系统平 ...
- Struts2 JQuery UI常用插件
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
- jQuery UI常用插件使用
一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...
- jQuery(UI)常用插件
jQuery 官方网站:http://jquery.com/ 下载地址:http://jquery.com/download/ 插件地址: http://plugins.jquery.com/ 常用插 ...
- easy ui 常用控件配置
table comboBox 下拉高度 panelHeight:'auto' textBox
- jQuery常用插件
jQuery UI插件简介: jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具 ...
- Easy UI 入门
Easy UI常用于企业级开发的UI和后台开发的UI,比较重. 以下组件中的加载方式,属性和事件,方法和组件种类并不全,只是作为参考和入门学习. 1.Draggable(拖动)组件 不依赖其他组件 1 ...
- Struts2 easy UI插件
一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...
- easy ui插件
简介: easy UI是类似于jQuery UI的插件库 注意:多脚本同时使用时,注意脚本冲突问题. 常用插件: 1.tree插件(tree插件实现动态树形菜单) 2.datagrid插件(datag ...
随机推荐
- SQLServer并发问题,先SELECT后UPDATE,避免并发脏读情况解决
在SQL Server中,需要对数据操作进行先SELECT 之后UPDATE,对于这样的操作,如果出现高并发,可能导致脏读情况的发生.不能保证数据的同步. 解决方案是在事物中对表进行加更新锁: 事务一 ...
- 25M时钟的梁祝演奏
module liangzhu(clk_50M,rst,speaker); input clk_50M,rst; output speaker; reg speaker; //分频计数器paramet ...
- html中<radio>单选按钮控件标签用法解析及如何设置默认选中
<input type="radio" name="radio" value="1">单选1 <input type=&q ...
- 异常处理的解决方案 OneTrueError
应用程序安装在用户计算机上,异常处理一直是反复出现的问题.用户报障中的描述不足以重现该问题.你不得不猜测,或者只是做猴子测试,以找出其异常出现的根源. 最严重的问题是当认为你已经找出了原因并纠正它,但 ...
- Deployment options
Play applications can be deployed virtually anywhere: inside Servlet containers, as standalone serve ...
- CSS :first-child 选择器 和 HTML DOM firstChild 属性
CSS 选择器参考手册 实例 选择属于其父元素的首个子元素的每个 <p> 元素,并为其设置样式: p:first-child { background-color:yellow; } 亲自 ...
- 用MSF进行提权
在WEB渗透中当我们拿到webshell了,我们可以试试用MSF(metasploit)来进行提权,在MSF里meterpreter很强大的! 我们先用msfvenom生成一个EXE的木马后门. ms ...
- JAVA静态代理模式(从现实生活角度理解代码原理)
代理模式(Proxy):为其他对象提供一种代理以控制对这个对象的访问. 代理模式说白了就是"真实对象"的代表,在访问对象时引入一定程度的间接性,因为这种间接性可以附加多种用途. 在 ...
- 深入浅出React Native 1: 环境配置
该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...
- Reveal1.5破解,iOS_UI调试利器Reveal最新版本破解方法
Reveal1.0.7破解 1.官网下载最新版Reveal,拖动应用程序中,运行一次2.下载16进制编辑器"0xED" for mac(http://dl.vmall.com/c0 ...