easyui可编辑表格.docx
- 文档编号:4646778
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:8
- 大小:18.36KB
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;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- easyui 编辑 表格