easyui可编辑表格.docx
《easyui可编辑表格.docx》由会员分享，可在线阅读，更多相关《easyui可编辑表格.docx（8页珍藏版）》请在冰豆网上搜索。
easyui可编辑表格
竭诚为您提供优质文档/双击可除
easy,ui,可编辑表格
篇一：
jqueryeasyui的添加,修改,删除,查询等基本操作介绍
jqueryeasyui的添加，修改，删除，查询等基本操作介绍
作者：
字体：
[增加减小]类型：
转载
初识jqueryeasyui看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例
初识jqueryeasyui看了一些博主用其开发出来的项目，页面很炫，感觉功能挺强大，效果也挺不错，最近一直想系统学习一套前台控件，于是在网上找了一些参考示例。
写了一些基本的增删改查功能，算是对该控件的基本入门。
后续有时间继续深入学习。
在学习jqueryeasyui前应该先到官网下载最新版本/download/index.php
先看一下运行后的页面
1、列表展示
2、新增页面
3、修改页面
把jqueryeasyui下载好之后，一般引用下页几个文件复制代码代码如下:
rel="stylesheet"type="text/css"/>
href="/Resources/easyui/js/themes/default/easyui.css"rel="stylesheet"
type="text/css"/>
//页面图标样式
href="/Resources/easyui/js/themes/icon.css"rel="stylesheet"type="text/css"/>
src="/Resources/easyui/js/jquery-1.7.2.min.js"type="text/javascript">
//jqueryeasyui主要的js
src="/Resources/easyui/js/jquery.easyui.min.js"type="text/javascript">
首先是列表展示数据复制代码代码如下:
url="/getjson/createjson.aspx"toolbar="#toolbar"pagination="true"rownumbers="true"
fitcolumns="true"singleselect="true">
编号
卡名
密码
创建时间
创建人
jqueryeasyui是用datagrid对数据进行展示的，所以class要选择
easyui-datagrid；url是本列表的一个json格式的数据来源toobar后面跟着的"#toobar"是列表的一个工具栏，本示例在列表上显示的是添加，修改，删除功能按钮对数据进行操作。
pagination是否显示分页，rownumbers显示行数，分页时向后台传去两个参数，一个就是当前页数另一个就是每页显示行数；fitcolumns：
自适应列宽；singleselected:
单选。
工具条代码复制代码代码如下:
plain="true">添加 onclick="edituser（）"plain="true">修改 iconcls="icon-remove"plain="true">删除
数据源格式
数据源添加弹出框复制代码代码如下
:
closed="true"buttons="#dlg-buttons">
信息编辑
编号
卡号
密码
创建时间
required="true"/>
创建人
篇二：
easyui学习笔记
esayui
前端开发：
企业中java工程师，大多不擅于html+css网页布局设计，门户网站（由前端工程师设计），企业内部应用软件（java工程师，选择前端ui框架extjs、Flex、easyui）
----------------------easyui学习成本非常低
easyui最新版本1.3.4，bos开发使用1.3.2版本
extjs2.x免费，3.x开始收费
easyui1.2.3版本开始收费
问题：
为什么你不用extjs
easyui学习成本低，很容易在项目中集成使用，extjs学习成本高昂
easyui+tutorial.chm官方demo例子
jquery_easyui.docdemo例子
easyui-api+1.3.2.chm中文api
jquery.easyui-1.3.1+api.chm英文api
jquery-easyui-1.3.2.zip框架开发包
目录结构分析
demo示例
locale国际化信息文件（默认英文提示信息）
plugins框架功能js文件
src源码
themes主题样式
自带5套主题，icons图标文件
easyloader.js核心加载器（加载plugins功能js）
jquery-1.8.0.min.jsjquery开发js文件
jquery.easyui.min.jseasyui框架功能js合集
jquery.easyui.min.js==easyloader.js+plugins/*
1.如何在页面中使用easyui？
引入四个文件
href="${pagecontext.request.contextpath}/js/easyui/themes/default/easyui.css">
href="${pagecontext.request.contextpath}/js/easyui/themes/icon.css">
src="${pagecontext.request.contextpath}/js/easyui/jquery-1.8.3.js">
src="${pagecontext.request.contextpath}/js/easyui/jquery.easyui.min.js">
2、学习使用easyui布局功能
layout布局控件使用
将body、div分成东西南北中，五个部分
北部
100px">南部
西部100px">东部
中部
注意，只有center区域的必须的
3、可折叠菜单accordion布局
aabb
通过iconcls:
icon-help指定图标（必须引入icon.css文件）
4、选项卡布局tabs布局
closable为true,选项卡可以被关闭
选项卡一
选项卡二
选项卡三
ztree
主页菜单栏树形菜单生成
树形结构菜单，通常使用js类库制作的
bos菜单树，使用ztree制作的
1、ztree是一个依靠jquery实现的多功能“树插件”。
优异的性能、灵活的配置、多种功能的组合是ztree最大优点。
开发使用ztree3.5（jquery插件）
api文档
css样式表
demo案例
js核心类库
今天目标：
简单树两种方式（标准数据和简单数据）
导入jquery.ztree.all-3.5.js、ztreestyle.css（依赖img图标文件夹）
src="${pagecontext.request.contextpath}/js/easyui/jquery-1.8.3.js">
type="text/css"href="${pagecontext.request.contextpath}/js/ztree/ztreestyle.css">
src="${pagecontext.request.contextpath}/js/ztree/jquery.ztree.all-3.5.js">
2、在accordion折叠菜单中，编写树形菜单
standarddata标准树
simpledata简单树
第一种：
标准数据
第一步：
在页面生成树地方，提供标签
第二步：
setting、数据。
初始化//初始化标准数据树
//1、settingvarsetting={};//2、数据varznodes=[{name:
菜单1,children:
[{name:
菜单11},{name:
菜单12}]},{name:
菜单2}];//3、生成树$.fn.ztree.init（$（"#basictree"）,setting,znodes）;
第二种：
简单数据
第一步：
在生成树位置，提供标签
第二步：
setting、数据、初始化
篇三：
easyui之datagrid的基本使用
编辑文章分类:
web前端
加载相关js和css，因为easyui依赖jquery，所有加载easyui前要先加载jquery，否则为提示找不到datagrid
html代码
1.
2.
3.
4.
5.
6.
界面加入
html代码
1.
加载datagrid的js代码
java代码
1.//页面加载
2.$（document）.ready（function（）{
3.loadgrid（）;
4.}）;
5.
6.//加载表格datagrid
7.functionloadgrid（）
8.{
9.//加载数据
10.$（#cxdm）.datagrid（{
11.width:
auto,
12.height:
300,
13.striped:
true,
14.singleselect:
true,
15.url:
getpsnewconsultlist.action,
16.//queryparams:
{},
17.loadmsg:
数据加载中请稍后……,
18.pagination:
true,
19.rownumbers:
true,
20.columns:
[[
21.{field:
adviceid,title:
来文号
,align:
center,width:
getwidth（0.2）},
22.{field:
consulter,title:
案由
,align:
center,width:
getwidth（0.45）,
23.//添加超级链，并将来文号作为参数传入
24.formatter:
function（val,rec）{
25.//alert（rec.adviceid）;
26.return""+val+"";
27.}
28.},
29.{field:
content,title:
状态
,align:
center,width:
getwidth（0.2）},
30.{field:
replynumber,title:
回复数
,align:
center,width:
getwidth（0.05）}
31.]]
32.}）;
33.}
34.
35.//为loadgrid（）添加参数
36.varqueryparams=$（#cxdm）.datagrid（options）.queryparams;
37.queryparams.who=who.value;
38.queryparams.type=type.value;
39.queryparams.searchtype=searchtype.value;
40.queryparams.keyword=keyword.value;
41.//重新加载datagrid的数据
42.$（"#cxdm"）.datagrid（reload）;
datagrid添加参数的方式
js代码
1.//为loadgrid（）添加参数
2.varqueryparams=$（#cxdm）.datagrid（options）.queryparams;
3.queryparams.who=who.value;
4.queryparams.type=type.value;
5.queryparams.searchtype=searchtype.value;
6.queryparams.keyword=keyword.value;
7.//重新加载datagrid的数据
8.$（"#cxdm"）.datagrid（reload）;
或者直接添加在url中
js代码
1.$（#repeatpspolal）.datagrid（{
2.title:
重复的未初分提案,
3.loadmsg:
"数据加载中，请稍后……",
4.region:
north,
5.url:
"getRepeatps.actiondocumentnumber="+documentnumber+"
3..........
4.//征询意见结果集
5.privatelistrows;
6............
7.
8.@suppresswarnings（"unchecked"）
9.publicstringgetpsnewconsultlist（）throwsglobalexception{
10.//获取每页显示的行数
11.intpageRows=10;
12.if（null!
=request.getparameter（"rows"））{
13.pageRows=integer.parseint（request.getparameter（"rows"）.tostring（））;
14.}
15............
16.//获取结果集
17.this.setRows（proposalservice.getpsnewconsultlist（consulter,consultee,type,psid,pscontent,pageRows*（page-1）+1,pageRows*page））;
18.//获取总记录数
19.this.settotal（100）;
20.......
.........
21.}
其中的page由datagrid传入，当用户在datagrid左下角选择每页显示的行数时，datagrid会将该值已参数形式附加到url后面传入action中，名字就叫page，还要将结果总行数total传给datagrid，用于分页
不知道是datagrid配置有误还是datagrid的bug，datagrid的结果集和每页显示的行数都叫rows，重名了
解决办法如上，结果集还是叫rows，但是list的类型改为object而不能用实体的类型，每页显示的行数通过request获取
action配置时，要继承json-default，json-default继承自struts-default，还要配置输出结果类型为json
java代码
1.
2.
3.
4.^rows\[\d+\]\.\w+,total
5.
6. true
7. false
8.
9.
service层
java代码
1.@suppresswarnings（"unchecked"）
2.publiclistgetpsnewconsultlist（stringconsulter,stringconsultee,stringtype,stringpsid,stringpscontent,intpageRows,intpage）throwsexception{
3.returnproposaldao.getpsnewconsultlist（consulter,consultee,type,psid,pscontent,pageRows,page）;
4.}
dao层只需要将Resultset中的数据循环加入实体属性，然后将实体实例加入list即可，形式如下：
java代码
1.list list=newarraylist （）;
2.personperson=null;
3.while（rs.next（））
4.{
5.person=newperson（）;
6.person.setid（i）;
7.person.setname（"名字"+i）;
8.list.add（person）;
9.}
10..........
11.returnlist;
升级会员 