JavaScript YUI 2.8: DataTable jquery form 异步请求显示数据分页

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  

菜鸟学习了！