需要导入的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格式的分页数据了