一、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 + "]}");
%>

实现效果:

Struts2 easy UI插件的更多相关文章

  1. easy ui插件

    简介: easy UI是类似于jQuery UI的插件库 注意:多脚本同时使用时,注意脚本冲突问题. 常用插件: 1.tree插件(tree插件实现动态树形菜单) 2.datagrid插件(datag ...

  2. Easy UI常用插件使用

    一.easy UI是类似于jQuery UI的插件库,它提供了丰富的各种常用插件:tree.datagrid... tree插件: 语法:$(selector).tree([settings]); 常 ...

  3. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  4. JQuery Easy Ui (Tree树)详解(转)

    第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...

  5. easy ui 验证框的使用

    Easy ui 插件之validatebox missingMessage:未填写时显示的信息validType:验证类型见下示例invalidMessage:无效的数据类型时显示的信息require ...

  6. iframeWin For Easy UI. 为 Easy UI 扩展的支持IFrame插件

    iframeWin For Easy UI. 为 Easy UI 扩展的支持IFrame插件 在一个项目中用了Easy UI,但是发现里面的 Dialog .Window.Messager 弹窗都不支 ...

  7. easy ui 如何单个引用其中某个插件?

    记录一下这个方法,前端时间一直在纠结这个问题,后来听一些前辈讲解后才恍然大悟,要单独引用某个插件,我们需要重视的是:easyloaer.js ,easy ui的下载包中也有easyloader的dem ...

  8. spring mvc +easy ui +Mybatis 录入数据

    1.itemsEasyui.jsp 应用到的插件及知识点:日期控件My97 ,图片本地预览函数PreviewImage() (1)easy ui 的模态窗口使用时,要指定DIV的属性 data-opt ...

  9. 关于ExtJS、JQuery UI和easy UI的选择问题

    转自百度知道. 问:做企业级应用,比如***管理系统,不需要华丽的特效,只希望简单,风格统一.能用到的只有messagebox.tree.grid大概这几个,其他特效不要,忘大神根据自己的见解以及我这 ...

随机推荐

  1. input框中的value值到底是什么

    value 属性为 input 元素设定值. 对于不同的输入类型,value 属性的用法也不同: type="button", "reset", "s ...

  2. h5输入框提示语 + 正常文本框提示语

    <input id="username" name="username" type="text" placeholder=" ...

  3. linux下tomcat自启动设置

    1.进入/etc/init.d 2.新建文件tomcat,内容如下: #!/bin/sh # chkconfig: 345 99 10 # description: Auto-starts tomca ...

  4. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  5. SVG图案填充-Pattern

    SVG图案一般用于SVG图形对象的填充fill或描边stroke.这个图形可以是一个SVG元素,也可以是位图图像,通过<pattern>元素在x轴或y轴方向以固定的间隔平铺. <pa ...

  6. iOS开发需要哪些图片?

    1.产品设计图 可以以6的长宽比 750*1134来设计.这些图片用于描述app是什么样子的,这是app开发人员的开发参考. 2.产品切图 将设计师将设计稿切成可以用来开发的图 颜色值 iOS颜色值取 ...

  7. hyperv 创建虚拟以太网交换机失败

    问题: hyperv 创建虚拟以太网交换机失败 解决办法: 取消无线共享,重新创建虚拟以太网交换机即可

  8. iOS多线程之6.GCD的其他用法

    队列组   让队列里的任务同时执行,当任务都执行完毕时,再以通知的形式告诉程序员.举例,同时下载两张图片,两张图片都下载完了,在合成成一张. 代码: #import "ViewControl ...

  9. iOS 数字滚动 类似于老 - 虎- 机的效果

    效果图 具体实现代码如下 ZCWScrollNumView.h文件 #import <UIKit/UIKit.h> typedef enum { ZCWScrollNumAnimation ...

  10. 使用Objective-C 计算代码运行时间

    第一种:(最简单的NSDate) NSDate* tmpStartData = [NSDate date]; //You code here... double deltaTime = [[NSDat ...