YUI Library: 一切关于yui的资料都可以获取
http://developer.yahoo.com/yui/
上个效果图:
两步走:
1 数据的获取(jquery form动态提交或者jquery ajax异步请求,内容和记录分两次请求):
2 数据的显示:(yahooui datatable)
1 数据的获取(jquery form动态提交或者jquery ajax异步请求):
YAHOOUI提供datasource可以异步去查询数据和数据的总记录数(一次查完),由于
//数据源
this.myDataSource = new YAHOO.util.DataSource(URL);
URL填写成action的时候跳转不了,可能自己还没有弄清楚,有谁知道请告诉我,
谢谢了.数据获取采用jquery的form动态提交或者js变量作为URL参数进行请求都可以,
但是后者会有中文乱码问题,并且当参数过长的时候URL会变得很长.曾经把参数以
json格式传递过去,只需一个变量,后台直接将json格式参数转换成JavaBean
关于json与java之间的相互转换请看这里,以后补上
现在补上了,2010-2-10,点击连接就可以看了js变量作为URL参数乱码 内容数据和分页导航的数据是分两次请求去取的,所以查询条件和page,perPageResults都必须同步的传递过去,否则内容和记录数就不一致
js变量作为URL参数进行传递
//得到分页内容url
function getQueryUrl(page) {
var account = document.getElementById("uuser").value;
var name = document.getElementById("uname").value;
var perPageResults = document.getElementById("perPageResults").value;
var backEndUrl = contextPath+"/yuidemo/userManager.do?method=queryByYahoo_1&count=1&account="+account+"&name="+name+"&perPageResults="+perPageResults;
if (typeof page != 'undefined'){
backEndUrl +="&page="+page;
}
return backEndUrl;
}
//内容显示 jquery ajax异步请求
function content(pageUrl){
$.ajax( {
type : "POST",
url : pageUrl,
cache : false,
dataType: "json",
success : showContent
});
} jquery form的动态提交把page也必须包含进去
// 内容显示
function content(){
var options = {
dataType: 'json',
url: contextPath+"/yuidemo/userManager.do?method=queryByYahoo_2&count=1",
success: showContent
};
$('#myForm').ajaxForm(options);
$('#myForm').submit();
}后台处理
List<UserDTO> list = new ArrayList<UserDTO>();
int page = 1;
if (user.getPage() != null && !"".equals(user.getPage())) {
page = Integer.parseInt(user.getPage());
}
int perPageResults = 10;
if (user.getPerPageResults() != null
&& !"".equals(user.getPerPageResults())) {
perPageResults = Integer.parseInt(user.getPerPageResults());
}
// ROWNUM rowIndex 从1开始不是从0开始
user.setStartRowNum((long) (page - 1) * perPageResults + 1);
user.setEndRowNum((long) page * perPageResults);
list = this.userDao.query(user);
JSONArray json = new JSONArray();
json.clear();
json = JSONArray.fromObject(list);
response.setHeader("X-JSON", json.toString());
response.setCharacterEncoding("UTF-8");
response.setHeader("Cache-Control", "no-cache,must-revalidate");// 清楚缓存
response.setHeader("Pragma", "no-cache"); // HTTP 1.0
response.setDateHeader("Expires", 0); // prevents caching at the
// json.put("data", 1);
response.getWriter().print(json.toString());
return null; 千万不要复制粘贴,我只是说思路而已
2 数据的显示:(yahooui datatable)
此处是第一步执行完后的回调函数,这样页面div上就可以显示数据了
这只是最最基本的一点
function showContent(data){
alert(data);
YAHOO.widget.DataTable.formatCheckBox = function(elLiner, oRecord,oColumn, oData) {
var value = oRecord.getData("uuid");
elLiner.innerHTML = "<input type='checkbox'value='"+value+"'>";
};
//表头定义
var myColumnDefs = [ {
key : "<input id='www' name='w' value='www' type='checkbox' onclick=\"selectall()\" >全选",
formatter:YAHOO.widget.DataTable.formatCheckBox
}, {
key : "uuid",
label:"用户ID",
sortable : true,
formatter:YAHOO.widget.DataTable.formatNumber
}, {
key : "uuser",
label:"帐号",
sortable : true
}, {
key : "uname",
label:"姓名",
sortable : true
}, {
key : "upassword",
label:"密码",
sortable : true
}, {
key : "urole",
label:"角色",
sortable : true
},{
key : "原因",
formatter : "dropdown",
dropdownOptions : [ "选择", "无此人", "停机", "忙" ],
sortable : false
}
];
//数据源
this.myDataSource = new YAHOO.util.DataSource(data);
//this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
this.myDataSource.responseSchema = {
//resultsList : "userList",
// Use the parse methods to populate the RecordSet with the right data types
fields : [ {
key : "uuid",parser:"number"
}, // this is already string data so no parser needed
{
key : "uuser"
},
{
key : "uname"
},
{
key : "upassword"
},
{
key : "urole"
}
]
};
//数据源与页面div绑定
this.myDataTable = new YAHOO.widget.DataTable("formatting",
myColumnDefs, this.myDataSource);
}例子:
Spring2.5+ibatis+Struts1 oracle 9.0
导入即可运行
需求变更
1--列宽要随便改导入:
<script type="text/javascript" src="../js/dragdrop-min.js"></script>
在列定义中加属性:
resizeable:true,
2--列字段的值是0的要求在页面上显示的时候是 空白
在列定义中定义[/size]
//投诉及建议
var renComplainsFormatte = function (el, oRecord, oColumn, oData) {
var renComplains =oRecord.getData('renComplains');
if (renComplains == '0') {
el.innerHTML='';
}
};
//在列定义再加上:
formatter:renComplainsFormatte 3--在DataTable中下拉列表动态显示
分两步走
a : 初始化信息放在ServletContext中
主要说下类:
初始化信息放在list中，（属性 -- > 指向list）
list<SelectDTO>
SelectDTO中有属性String value，String text
为什么放在list中，而不是放在map中？（页面上c标签可以循环装DTO的list）
b: 把信息转化成js的Array,在YUI列定义中进行设置
1--ServletContext中的list信息转化成Array
<script type="text/javascript">
var dropdata = new Array();
//var dropdata = [{'text':'请选择','value':'-1'}];
var first = {'label':'请选择','value':'-1'};
dropdata.push(first);
//dropdata.push(aa);
<c:forEach items="${oyp}" var="item">
var object = new Object();
object.label = "${item.text}";
object.value = "${item.value}";
//dropdata.push({'text':'${item.text}','value':'${item.value}'});
dropdata.push(object);
</c:forEach>
</script>2--yui中进行设置这个下拉信息Array(在列定义中进行设置)
{
key : "uname",
sortable : false,
editor: new YAHOO.widget.DropdownCellEditor({dropdownOptions:eval(dropdata), disableBtns:true}),
formatter: function(el, oRecord, oColumn, oData) {
var combo = dropdata;
for (var i = 0;i<combo.length;i++) {
if (oData == combo[i].value) {
el.innerHTML = combo[i].label;
return;
}
el.innerHTML = oData;
}
}
}, 附上例子:
Spring2.5+ibatis+Struts1 oracle 9.0
导入即可运行(only a table and a procedure)
1 楼
hongye1120
2010-10-25
菜鸟学习了！