YUI 2.8动态分页及组合增删改

最新推荐文章于 2025-11-29 03:46:46 发布

原创最新推荐文章于 2025-11-29 03:46:46 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#YUI #Yahoo #JavaScript #CSS #json #ViewUI

Yui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用YUI库实现动态表格和对话框的方法，包括如何设置表格样式、加载脚本文件、定义对话框行为及表格操作事件等。

需要导入的css及js，顺序有讲究的

 <!--全局样式依赖-->
    <link rel="stylesheet" href="$tpsContent.setContentPath("static/css/tbsp.css")"/>
    <link rel="stylesheet" href="$tpsContent.setContentPath("static/css/base.css")"/>
    <!--组件专有样式-->
    <link rel="stylesheet" href="$tpsContent.setContentPath("static/lib/container/assets/skins/sam/container.css")"/>
    <link rel="stylesheet" href="$tpsContent.setContentPath("static/lib/button/assets/skins/sam/button.css")"/>
    <!--datatable 专有样式-->
    <link rel="stylesheet" type="text/css" href="$tpsContent.setContentPath("static/lib/datatable/assets/skins/sam/datatable.css")"/>
    <!--paginator 专有样式-->
    <link rel="stylesheet" type="text/css" href="$tpsContent.setContentPath("static/lib/paginator/assets/skins/sam/paginator.css")"/>

    <!--组件专有脚本-->
    <!--datatable 和 paginator 脚本-->
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/yahoo-dom-event/yahoo-dom-event.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/connection/connection-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/json/json-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/dragdrop/dragdrop-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/animation/animation-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/element/element-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/paginator/paginator-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/datasource/datasource-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/datatable/datatable-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/container/container-min.js")"></script>
    <script type="text/javascript" src="$tpsContent.setContentPath("static/lib/button/button-min.js")"></script>

定义命名空间及各种需要初始化得操作

 YAHOO.namespace("page.container");
	  
	  var myTable,mySource;
	
	  var handleSubmit = function() {
          this.submit();
      };
      var createHandleCancel = function() {
          YAHOO.page.container.dlgCreate.form.reset();
          this.cancel();
      };
      
      var modifyHandleCancel = function() {
          this.cancel();
      }
      
      var batchDeleteMethod = {
          success : function (o) {
          	  var response;
          	  if(o.responseText=="delete"){
                  response = "删除表成功，点击“确定”刷新页面"
              }
              if (confirm(response)) {
                  window.location.reload();
              } 
          },
          failure : function (o) {
              if (!YAHOO.util.Connect.isCallInProgress(o)) {
                  alert("服务调用失败!");
              }
          },
          //timeout : 3000
      };
      
      
      //编辑方法
     var editRowData = function(e){
         var oRecord;
         var selectRows = myTable.getSelectedRows();
         if(selectRows.length!=null && selectRows.length==1){
             oRecord = myTable.getRecordSet().getRecord(selectRows[0]);
             var formData = YAHOO.page.container.dlgModify.form;
             formData.reset();
             formData.userId.value = YAHOO.lang.dump(oRecord.getData("userId"));
             formData.userName.value = YAHOO.lang.dump(oRecord.getData("userName"));
             formData.userEmail.value = YAHOO.lang.dump(oRecord.getData("userEmail"));
             formData.userPwd.value = YAHOO.lang.dump(oRecord.getData("userPwd"));
             formData.userAccount.value = YAHOO.lang.dump(oRecord.getData("userAccount"));
             formData.userPhone.value = YAHOO.lang.dump(oRecord.getData("userPhone"));
             YAHOO.page.container.dlgModify.show();
         }else{
             alert("请选中一行进行编辑");
         }
     }
     //删除方法
     var deleteRowData = function(e){
         var oRecord;
         var selectRows = myTable.getSelectedRows();
         if(selectRows.length>0){
         	 var ids = "";
             for(var i=0;i<selectRows.length;i++){
                 oRecord = myTable.getRecordSet().getRecord(selectRows[i]);
                 if(i>0){
                     ids += ",";
                 }
                 ids += YAHOO.lang.dump(oRecord.getData("userId"));
             }
             //ids += "}";
         }else{
             alert("请选中行进行删除");
         }
         YAHOO.util.Connect.asyncRequest('POST',"$tpsModule.setTarget("scm/scmManageDev.htm").addQueryData("action","scm/scmAction").addQueryData("event_submit_do_delete_user","anything")", batchDeleteMethod,'ids='+ids); 
     }

定义dialog的属性并渲染

      //定义Dialog的一些属性
 	  YAHOO.page.container.dlgCreate = new YAHOO.widget.Dialog("dlg_create", 
      { width : "30em",
        fixedcenter : true,
        postmethod: "form",
        visible : false, 
        constraintoviewport : true,
        modal: true,//hideMask
        buttons : [ { text:"提交", handler:handleSubmit, isDefault:true },
                    { text:"取消", handler:createHandleCancel } ]
      });
      
      
      YAHOO.page.container.dlgModify = new YAHOO.widget.Dialog("dlg_modify", 
      { width : "30em",
        fixedcenter : true,
        postmethod: "form",
        visible : false, 
        constraintoviewport : true,
        modal: true,//hideMask
        buttons : [ { text:"提交", handler:handleSubmit, isDefault:true },
                    { text:"取消", handler:modifyHandleCancel } ]
      });
      
      // 进行数据验证的方法
     YAHOO.page.container.dlgCreate.validate = function() {
         var data = this.getData();
         if (data.userName == ""||data.userPwd == "") {
             alert("用户名或密码不能为空");
             return false;
         } else {
             return true;
         }
     };

     
     //装配Dialog层
     YAHOO.page.container.dlgCreate.render();
     YAHOO.page.container.dlgModify.render();

生成分页table的js

YAHOO.page.USERJSON = new function() {
	    var DataSource = YAHOO.util.XHRDataSource,
	        DataTable  = YAHOO.widget.DataTable,
	        Paginator  = YAHOO.widget.Paginator;
	
        //自定义转换函数 用于表格数据展示不同效果 
        var defType=function(odata){
            if(!YAHOO.lang.isNumber(odata)) return  "数据有错误";
            if(odata==0) return "开发人员";  //此处由cfg4u配置输出
            if(odata==1) return "SCM人员";
            return "数据有错误";
        }
        	
	    mySource = new DataSource("$tpsContent.setContentPath("scm/user_paginator.do?")");
	    
	    mySource.responseType   = DataSource.TYPE_JSON;
	    
	    mySource.responseSchema = {
	    	resultsList: 'data',
	        fields: ["userId","userPwd","userName","userAccount","userEmail","userPhone",{key:"userType",parser:defType}],
	        metaFields: {
	            totalRecords: "totalRecords"
	        }
	    };
	
	    var buildQueryString = function (state,dt) {
	        return "startIndex=" + state.pagination.recordOffset +
	               "&results=" + state.pagination.rowsPerPage+
	               "&temp=" + new Date().getTime();
	    };
	    
	    var myPaginator = new Paginator({   
	        pageLinks          : 5,   
	        rowsPerPage        : 10,   
	        rowsPerPageOptions : [10,15,20],  
	        template           : "<strong>{CurrentPageReport}</strong> {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}"  
	    });  
	
	
	    var myTableConfig = {
	        initialRequest         : 'startIndex=0&results=10&temp='+ new Date().getTime(),
	        generateRequest        : buildQueryString,
	        dynamicData            : true, 
	        paginator              : myPaginator
	    };
	    
		// 列宽
		var GRID_WIDTH = 685;
	
	    var myColumnDefs = [
	        {
	            key:"userId",
	            hidden:true
	        },
	        {
	            key:"userPwd",
	            hidden:true
	        },
	        {
	            key:"userAccount",
	            label:"账号",
	            width:80,
	            resizeable:true
	        },
	        {
	            key:"userName",
	            label:"姓名",
	            width:80,
	            resizeable:true
	        },
	        {
	            key:"userEmail",
	            label:"邮箱",
	            width:(GRID_WIDTH - 310) / 2,
	            resizeable:true
	        },
	        {
	            key:"userPhone",
	            label:"联系电话",
	            width:(GRID_WIDTH - 310) / 2,
	            resizeable:true
	        },
	        {
	            key:"userType",
	            label:"用户类型",
	            width:80,
	            resizeable:true
	        }
	    ];
	    
	
	    myTable = new DataTable('dt', myColumnDefs, mySource, myTableConfig);
	    
	    myTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
			oPayload.totalRecords = oResponse.meta.totalRecords;
			return oPayload;
		}
		
		return {
	        ds: mySource,
	        dt: myTable
	    };
	    
	  }();

添加监听事件

	 YAHOO.util.Dom.removeClass("dlg_create", "yui-pe-content");
	  YAHOO.util.Dom.removeClass("dlg_modify", "yui-pe-content");
      myTable.subscribe("rowMouseoverEvent", myTable.onEventHighlightRow);//高亮行,鼠标移过时高亮作用
      myTable.subscribe("rowMouseoutEvent", myTable.onEventUnhighlightRow);
      myTable.subscribe("rowClickEvent", myTable.onEventSelectRow); //标准行选择,支持多行选择
	  YAHOO.util.Event.addListener("addtable", "click", YAHOO.page.container.dlgCreate.show, YAHOO.page.container.dlgCreate, true);
      YAHOO.util.Event.addListener("edittable", "click", editRowData);
      YAHOO.util.Event.addListener("deletetable", "click", deleteRowData);

核心代码 mySource = new DataSource("$tpsContent.setContentPath("scm/user_paginator.do?")");

这段就是请求的回来的json格式的分页数据了