本篇介绍了排序自定义，排版布局,以及对ext树和ext的grid的应用，具体看代码注释吧！注意自己加入ext包内容以及json所需包！
首先是jsp代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
html,body{
margin:0px;
height:100%;
}
#center-div{
height:100%;
width:100%;
}
</style>
</head>
<body style="height:100%">
<script type="text/javascript">
//排序自定义，排版布局,以及对ext树和ext的grid的应用
var nav;
var viewport;
var grid;
var cm;
var ds;
var bbar;
var h;
var tree;
var root;
function addGrade(val){
//ext的ajax的基本使用
Ext.Ajax.request({
//随意请求没有作用，只是测试而已
url: contextPath+'/search.do?method=addGrade',
params: {
//传到后台的参数名称是grade值是val
grade: val
},
//ajax如果成功则执行此方法
success: function(response, options) {
//解析Json数据
var responseArray = Ext.util.JSON.decode(response.responseText);
//ext的alert调整宽度
//Ext.MessageBox.minWidth=250;
//Ext.Msg.alert('成功信息','添加年级:'+responseArray.name+'成功!');
//重载root节点,重载后是直接展开root的状态
tree.root.reload();
}
});
}
//性别详细
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>女</span>";
}
}
//描述详细
function renderDescn(value, cellmeta, record, rowIndex, columnIndex,store){
var str = (rowIndex+1)+"行|"+(columnIndex+1)+"列";
return str;
}
//动态解析树
root = new Ext.tree.AsyncTreeNode({
text:'年级',//根节点名称
id:'root',//定位到根节点
loader: new Ext.tree.TreeLoader({url:contextPath+'/search.do?method=findGrade'})//请求后台取到子节点
});
Ext.onReady(function(){
//创建树
tree =new Ext.tree.TreePanel({
root:root,
width:198,
height:732,
rootVisible:true,//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
//root:root,//定位到根节点
animate:true,//开启动画效果
enableDD:true,//允许子节点拖动
border:false//没有边框
});
//树的右键菜单的事件
function onAddNode(){
//弹出输入框
Ext.MessageBox.prompt('新增年级', '请输入您要添加的年级', function(btn, text){
if('ok'==btn){
//添加节点到后台
addGrade(text);
}
});
}
//定义右键菜单
var rightClick = new Ext.menu.Menu({
id :'rightClickCont',
items : [{
id:'rMenu1',
text : '添加年级',
//增加菜单点击事件
handler : onAddNode
}]
});
tree.getRootNode().on('contextmenu',function(node,event){//声明菜单类型
event.preventDefault();//这行是必须的，使用preventDefault 方法可防止浏览器的默认事件操作发生。
rightClick.showAt(event.getXY());//绑定右键菜单组件,取得鼠标点击坐标，展示菜单
});
//建立一个面板
nav = new Ext.Panel({
el: 'nav',
title: '管理系统v1.1',
layout:'accordion', // 注意这个面板的布局
region: 'west', // 注意这个面板将在window 中的布局位置
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',//四周边框的宽度
cmargins:'3 3 3 3',
layoutConfig:{
animate:true //注意这里的动画效果
},
items: [{
contentEl: 't1',
title: '<font color="blue">年级</font>',
items: [tree]//加入tree组件
},{
contentEl: 't2',
title: '<font color="blue">学生</font>'
}]
});
//ext3的布局管理器
viewport = new Ext.Viewport({
layout:'border',//布局类型
items:[nav,{
title: '表格',
region: 'center',
contentEl: 'center-div',
split: true,
border: true,
collapsible: true
}]//west是nav,center是grid
});
//对列的定义
cm = new Ext.grid.ColumnModel([
{header:'<font color="blue">编号</font>',width: Ext.get("center-div").getWidth()/5,sortable:true,dataIndex:'id'},
{header:'<font color="blue">日期</font>',width: Ext.get("center-div").getWidth()/5,dataIndex:'time',renderer:Ext.util.Format.dateRenderer('Y-m-d h:i:s')},
{header:'<font color="blue">性别</font>',width: Ext.get("center-div").getWidth()/5,dataIndex:'sex',renderer:renderSex},
{header:'<font color="blue">名称</font>',width: Ext.get("center-div").getWidth()/5,dataIndex:'name'},
{header:'<font color="blue">描述</font>',width: Ext.get("center-div").getWidth()/5,dataIndex:'descn',renderer:renderDescn}
]);
//ajax代理
var proxyParam={
url:contextPath+'/search.do?method=SearchAjax',
method:'GET'
};
//对ajax返回的json数据进行解析,
var jsonReaderMeta={
root: 'grids',//Json对象的root名称,与SearchVO的属性相对应
totalProperty: 'totalCount', //数据的总行数 ,与SearchVO的属性相对应
id: 'id' //数据的主键,与GridVO的属性相对应
};
//解析Json数据的类型
var recordType=[
{name: 'id', mapping: 'id'},
//日期类型如果是String也可以表明为date型，不过需要标明pattern,具体pattern可查api中date类
{name: 'time', mapping: 'time',type : 'date',dateFormat : 'Y-m-d h:i:s' },
{name: 'sex', mapping: 'sex'},
{name: 'name', mapping: 'name'},
{name: 'desc', mapping: 'desc'}
];
//定义dataStore
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(proxyParam),
reader: new Ext.data.JsonReader(jsonReaderMeta,recordType),
remoteSort:true //允许到后台进行排序
});
//定义分页标签
bbar = new Ext.PagingToolbar({
pageSize: 28,
store: ds,
displayInfo: true,
displayMsg: '第{0} 到 {1} 条数据 共{2}条',
emptyMsg: "没有数据"
});
//创建grid对象
grid = new Ext.grid.GridPanel({
//renderTo: 'center-div',
width: Ext.get("center-div").getWidth(),
store: ds,
cm: cm,
loadMask: true,
bbar: bbar,
//增加操作选项卡
tbar:[{
text:"添加",
handler:showAdd,
scope:this
},"-",
{
text:"修改",
handler:showUpdate,
scope:this
},"-",{
text:"删除",
handler:showDel,
scope:this
}],
//如果需要每列自动填满Grid，可以使用viewConfig配置中的foreceFit
viewConfig:{forceFit:true}
});
//加载grid的数据
ds.load({params:{start:0, limit:28}});
grid.render('center-div');
ds.on('load', function(){
h = $('.x-panel-bbar').height()+$('.x-grid3-body').height()+$('.x-grid3-header').height()+$('.x-panel-tbar').height()+25;
if(h>document.body.clientHeight){
grid.setHeight(document.body.clientHeight-$('.x-panel-bbar').height());
}else{
grid.setHeight(h);
}
});
//添加panel内部的内容
//nav.get(0).toggleCollapse();
//nav.get(0).load({
//url: "http://localhost:8783/MyTest/search.do?method=findGrade",
//discardUrl: false,
//nocache: false,
//timeout: 30,
//scripts: false
//});
});
//随意点击
function showAdd(){
ds.reload();
}
//随意点击
function showDel(){
var del_id=grid.getSelectionModel().getSelected().data.id;
alert("删除行:"+del_id);
}
//随意点击
function showUpdate(){
var update_id=grid.getSelectionModel().getSelected().data.id;
alert("更新行:"+update_id);
}
//自动适应浏览器窗口调整
window.οnresize=function(){
grid.setWidth(($('#main').width())-$('#nav').width()-5);
h = $('.x-panel-bbar').height()+$('.x-grid3-body').height()+$('.x-grid3-header').height()+$('.x-panel-tbar').height()+25;
if(h>document.body.clientHeight){
grid.setHeight(document.body.clientHeight-$('.x-panel-bbar').height()-$('.x-panel-tbar').height());
}else{
grid.setHeight(h);
}
grid.reconfigure(ds,cm);
};
</script>
<div id="dialog"></div>
<div id="main">
<div id='nav'>
<div id='nav-content'>
<div id='t1'></div>
<div id='t2'></div>
</div>
</div>
<div id="center-div">
<div>
</div>
</body>
</html>
后台代码包含grid的请求部分以及tree的请求部分----------------------
search.do内部分:
String dateFormat() {
SimpleDateFormat smf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
Date date = new Date(System.currentTimeMillis());
return smf.format(date);
}
public ActionForward addGrade(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
String gradeName = request.getParameter("grade");
System.out.println(gradeName);
GridVO gridVO = new GridVO();
gridVO.setName(gradeName);
JSONObject object = JSONObject.fromObject(gridVO);
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(object.toString());
return null;
}
public ActionForward findGrade(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
List<TreeVO> root = new ArrayList<TreeVO>();
List<TreeVO> children = new ArrayList<TreeVO>();
TreeVO vo = new TreeVO();
vo.setId("grade1");
vo.setText("一年级");
vo.setHref("#");
vo.setLeaf(true);
/*TreeVO classvo = new TreeVO();
classvo.setId("class1");
classvo.setText("一班");
classvo.setHref("#");
classvo.setLeaf(true);
children.add(classvo);
classvo = new TreeVO();
classvo.setId("class2");
classvo.setText("二班");
classvo.setHref("#");
classvo.setLeaf(true);
children.add(classvo);
vo.setChildren(children);*/
root.add(vo);
vo = new TreeVO();
vo.setId("grade2");
vo.setText("二年级");
vo.setHref("#");
vo.setLeaf(true);
root.add(vo);
JSONArray JsonArray = JSONArray.fromObject(root);
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(JsonArray.toString());
return null;
}
public ActionForward SearchAjax(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
Integer start = Integer.valueOf(request.getParameter("start"));
Integer limit = Integer.valueOf(request.getParameter("limit"));
System.out.println("start:" + start + "|limit:" + limit);
String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
if (StringUtils.isBlank(sort)) {
sort = "id";
}
if (StringUtils.isBlank(dir)) {
dir = "ASC";
}
System.out.println("sort:" + sort + "|" + dir);
List<GridVO> lists = new ArrayList<GridVO>();
GridVO vo = new GridVO();
vo.setId(1);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name1");
vo.setDesc("descn1");
lists.add(vo);
vo = new GridVO();
vo.setId(2);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name2");
vo.setDesc("descn2");
lists.add(vo);
vo = new GridVO();
vo.setId(3);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name3");
vo.setDesc("descn3");
lists.add(vo);
vo = new GridVO();
vo.setId(4);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name4");
vo.setDesc("descn4");
lists.add(vo);
vo = new GridVO();
vo.setId(5);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name5");
vo.setDesc("descn5");
lists.add(vo);
vo = new GridVO();
vo.setId(6);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name6");
vo.setDesc("descn6");
lists.add(vo);
vo = new GridVO();
vo.setId(7);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name7");
vo.setDesc("descn7");
lists.add(vo);
vo = new GridVO();
vo.setId(8);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name8");
vo.setDesc("descn8");
lists.add(vo);
vo = new GridVO();
vo.setId(9);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name9");
vo.setDesc("descn9");
lists.add(vo);
vo = new GridVO();
vo.setId(10);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name10");
vo.setDesc("descn10");
lists.add(vo);
vo = new GridVO();
vo.setId(11);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name11");
vo.setDesc("descn11");
lists.add(vo);
vo = new GridVO();
vo.setId(12);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name12");
vo.setDesc("descn12");
lists.add(vo);
vo = new GridVO();
vo.setId(13);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name13");
vo.setDesc("descn13");
lists.add(vo);
vo = new GridVO();
vo.setId(14);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name14");
vo.setDesc("descn14");
lists.add(vo);
vo = new GridVO();
vo.setId(15);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name15");
vo.setDesc("descn15");
lists.add(vo);
vo = new GridVO();
vo.setId(16);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name16");
vo.setDesc("descn16");
lists.add(vo);
vo = new GridVO();
vo.setId(17);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name17");
vo.setDesc("descn17");
lists.add(vo);
vo = new GridVO();
vo.setId(18);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name18");
vo.setDesc("descn18");
lists.add(vo);
vo = new GridVO();
vo.setId(19);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name19");
vo.setDesc("descn19");
lists.add(vo);
vo = new GridVO();
vo.setId(20);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name20");
vo.setDesc("descn20");
lists.add(vo);
vo = new GridVO();
vo.setId(21);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name21");
vo.setDesc("descn21");
lists.add(vo);
vo = new GridVO();
vo.setId(22);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name22");
vo.setDesc("descn22");
lists.add(vo);
vo = new GridVO();
vo.setId(23);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name23");
vo.setDesc("descn23");
lists.add(vo);
vo = new GridVO();
vo.setId(24);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name24");
vo.setDesc("descn24");
lists.add(vo);
vo = new GridVO();
vo.setId(25);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name25");
vo.setDesc("descn25");
lists.add(vo);
vo = new GridVO();
vo.setId(26);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name26");
vo.setDesc("descn26");
lists.add(vo);
vo = new GridVO();
vo.setId(27);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name27");
vo.setDesc("descn27");
lists.add(vo);
vo = new GridVO();
vo.setId(28);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name28");
vo.setDesc("descn28");
lists.add(vo);
vo = new GridVO();
vo.setId(29);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name29");
vo.setDesc("descn29");
lists.add(vo);
vo = new GridVO();
vo.setId(30);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name30");
vo.setDesc("descn30");
lists.add(vo);
vo = new GridVO();
vo.setId(31);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name31");
vo.setDesc("descn31");
lists.add(vo);
vo = new GridVO();
vo.setId(32);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name32");
vo.setDesc("descn32");
lists.add(vo);
vo = new GridVO();
vo.setId(33);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name33");
vo.setDesc("descn33");
lists.add(vo);
vo = new GridVO();
vo.setId(34);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name34");
vo.setDesc("descn34");
lists.add(vo);
vo = new GridVO();
vo.setId(35);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name35");
vo.setDesc("descn35");
lists.add(vo);
vo = new GridVO();
vo.setId(36);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name36");
vo.setDesc("descn36");
lists.add(vo);
vo = new GridVO();
vo.setId(37);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name37");
vo.setDesc("descn37");
lists.add(vo);
vo = new GridVO();
vo.setId(38);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name38");
vo.setDesc("descn38");
lists.add(vo);
vo = new GridVO();
vo.setId(39);
vo.setTime(dateFormat());
vo.setSex("male");
vo.setName("name39");
vo.setDesc("descn39");
lists.add(vo);
vo = new GridVO();
vo.setId(40);
vo.setTime(dateFormat());
vo.setSex("female");
vo.setName("name40");
vo.setDesc("descn40");
lists.add(vo);
// 排序
lists = sortObj(lists, sort, dir);
SearchVO searchVO = new SearchVO();
searchVO.setTotalCount(lists.size());
lists = findCurrentPageObj(lists, start, limit);
searchVO.setGrids(lists);
JSONObject obj = JSONObject.fromObject(searchVO);
System.out.println(obj.toString());
response.setContentType("text/xml;charset=utf-8");
response.getWriter().print(obj.toString());
return null;
}
private List<GridVO> sortObj(List<GridVO> list, String sort, String dir) {
Set<ResultTokenDelegate> someSet = new TreeSet<ResultTokenDelegate>();
List<GridVO> result = new ArrayList<GridVO>();
for (GridVO res : list) {
ResultTokenDelegate delegate = new ResultTokenDelegate(res, sort,
dir);
someSet.add(delegate);
}
Iterator iterator = someSet.iterator();
while (iterator.hasNext()) {
ResultTokenDelegate delegate = (ResultTokenDelegate) iterator
.next();
result.add(delegate.getResult());
}
return result;
}
List<GridVO> findCurrentPageObj(List<GridVO> list, int start, int limit) {
List<GridVO> vos = new ArrayList<GridVO>();
for (int i = 0; i < list.size(); i++) {
if (i >= start && i < (start + limit)) {
vos.add(list.get(i));
}
}
return vos;
}TreeVO类代码：
package com.xuyi.vo;
import java.util.ArrayList;
import java.util.List;
public class TreeVO {
String id;
String href;
String hrefTarget;
String text;
boolean leaf;
List<TreeVO> children = new ArrayList<TreeVO>();
public String getHref() {
return href;
}
public void setHref(String href) {
this.href = href;
}
public String getHrefTarget() {
return hrefTarget;
}
public void setHrefTarget(String hrefTarget) {
this.hrefTarget = hrefTarget;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public boolean isLeaf() {
return leaf;
}
public void setLeaf(boolean leaf) {
this.leaf = leaf;
}
public List<TreeVO> getChildren() {
return children;
}
public void setChildren(List<TreeVO> children) {
this.children = children;
}
}
GridVO类的代码:
package com.xuyi.vo;
public class GridVO {
int id;
String sex;
String name;
String desc;
String time;
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public String getDesc() {
return desc;
}
public void setDesc(String desc) {
this.desc = desc;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
}
SearchVO类的代码：
package com.xuyi.vo;
import java.util.ArrayList;
import java.util.List;
public class SearchVO {
int totalCount;
List<GridVO> grids = new ArrayList<GridVO>();
public List<GridVO> getGrids() {
return grids;
}
public void setGrids(List<GridVO> grids) {
this.grids = grids;
}
public int getTotalCount() {
return totalCount;
}
public void setTotalCount(int totalCount) {
this.totalCount = totalCount;
}
}
ResultTokenDelegate类的代码:(用来进行list对象的排序)
package com.xuyi.util.sort;
import com.xuyi.vo.GridVO;
public class ResultTokenDelegate implements Comparable {
private GridVO result;
private String sort;
private String dir;
public ResultTokenDelegate() {
}
public ResultTokenDelegate(GridVO result, String sort, String dir) {
this.result = result;
this.sort=sort;
this.dir=dir;
}
public GridVO getResult() {
return result;
}
public void setResult(GridVO result) {
this.result = result;
}
public String getDir() {
return dir;
}
public void setDir(String dir) {
this.dir = dir;
}
public String getSort() {
return sort;
}
public void setSort(String sort) {
this.sort = sort;
}
public int compareTo(Object o) {
ResultTokenDelegate ntd = (ResultTokenDelegate) o;
if ("id".equals("id")) {
if ("ASC".equals(dir)) {
if (this.getResult().getId() < ntd.getResult().getId()) {
return -1;
} else if (this.getResult().getId() == ntd.getResult().getId()) {
return 1;
} else {
return 1;
}
}else{
if (this.getResult().getId() < ntd.getResult().getId()) {
return 1;
} else if (this.getResult().getId() == ntd.getResult().getId()) {
return 1;
} else {
return -1;
}
}
}else{
return 1;
}
}
}
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
