YUI 2 自定义事件-可编辑表格设置特定行不可编辑

0 0

YUI 2 自定义事件-可编辑表格设置特定行不可编辑5

问题主要内容:

一个可编辑表格myDataTable1 ：

myDataTable1 = new YAHOO.widget.ScrollingDataTable("dtcontainer1", myColumnDefs1, myDataSource1,{width:"100%",height:"32em",draggableColumns:true});

最后一行是合计行，要设置为不可编辑（鼠标点击不要出现编辑框）。怎么做？

以我做EXT,dojo,jquery-easyui的经验，我认为大概的思路是要在myDataTable1 的cellClickEvent上做文章

myDataTable1.subscribe("cellClickEvent", myDataTable1.onEventShowCellEditor);

下面我使用类语言代码：

myDataTable1.subscribe("cellClickEvent", function(){
	        	//alert("hello");
	        	if(!myDataTable1.thisRow.islastRow){//如果不是最后一行就可编辑
	        		myDataTable1.thisRow.editable=false;
	        	}else{//如果是最后一行就不可编辑
	        		myDataTable1.thisRow.editable=true;
	        	}
	        });

下面是本人正在做的整个页面代码，可不用理会，有兴趣的人看看：

<%@ page language="java" contentType="text/html; charset=GBK"
	pageEncoding="GBK"%>
<%@ page import="com.copote.zsgl.helper.HtmlHelper"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>
<jsp:useBean id="budgetForm" scope="request" class="com.copote.zsgl.web.form.finance.BudgetForm"></jsp:useBean>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/reset-fonts-grids/reset-fonts-grids.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/layout/assets/skins/sam/layout.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/tabview/assets/skins/sam/tabview.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/treeview/assets/skins/sam/treeview.css" />
<link rel="stylesheet" type="text/css" href="/scripts/yui_2.9.0/build/grids/grids.css" />

<script type="text/javascript" src="/scripts/yui_2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/event/event-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/event-delegate/event-delegate-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/datatable/datatable-min.js"></script>

<script type="text/javascript" src="/scripts/yui_2.9.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/resize/resize-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/layout/layout-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/tabview/tabview-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/treeview/treeview-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/container/container-min.js"></script>
<script type="text/javascript" src="/scripts/yui_2.9.0/build/utilities/utilities.js"></script>

<script type="text/javascript" src="/dwr/interface/budgetService.js"></script>
<script type="text/javascript" src="/dwr/engine.js"></script>

<style type="text/css">
.yui-skin-sam .yui-dt-liner { white-space:nowrap; } 
#treeDiv1 {background: #fff; margin-top:1em; padding:1em; min-height:7em;}
#examplecontainer {
    padding:10px;
}

#resizablepanel .bd {
    overflow:auto;
    background-color:#fff;
    padding:0px;
    text-align:left; 
}

#resizablepanel .ft {
    height:15px;
    padding:0;
}

#resizablepanel .yui-resize-handle-br {
    right:0;
    bottom:0;
    height: 8px;
    width: 8px;
    position:absolute;
}

#resizablepanel_c.hide-scrollbars .yui-resize .bd {
    overflow: hidden;
}

#resizablepanel_c.show-scrollbars .yui-resize .bd {
    overflow: auto;
}

#resizablepanel_c.show-scrollbars .underlay {
    overflow: visible;
}
</style>

</head>

<body class="yui-skin-sam">
	<div id="top1">	
	<html:form action="/budget.do?method=apply" focus="dwbm" method="post" enctype="multipart/form-data">
	<table width="100%" border="0" cellspacing="6" cellpadding="0" class="tablesearch">	
	   <tr>	    
	    <td>
<div id="examplecontainer">
	财政年度:
    <select id="nd" name="nd" onChange="changeYear(this.form)">
    	<%=HtmlHelper.getYearSelectOption(8,1,false,budgetForm.getNd()) %>
    </select>
    预算单位:
    <input id="operateFlag" name="operateFlag" type="hidden">		
    <input id="dwnm" name="dwnm" type="hidden">		
    
    <input id="dwbm" name="dwbm" type="text" onchange="getName()">		    
    <input id="dwmc" name="dwmc" type="text" readonly="readonly">	
    <input type="button" id="showbtn" value="..."/>
    <input type="button" id="queryButton" value="查 询" onclick="getBudgetData(true)" />
	<input type="button" id="expButton"   value="导 出" onclick="expBudget(this.form)" />
	<input type="button" id="printButton"  value="打 印" onclick="printBudget()" />

</div>		    
			
		</td>
		<td align="right">
			<input type="button" id="saveButton"   value="保 存" disabled="disabled" onclick="saveBudget()" />
			<input type="button" id="upButton"  value="申 报" disabled="disabled" onclick="saveAndUpBudget()" />
		</td>
	  </tr>
	  <tr>
	  	<td>
	 	 	<html:file property="file" size="53"></html:file>
	 	 	<input type="button" id="impButton"  value="导 入" disabled="disabled"  onclick="impBudget(this.form)" />
	  	</td>
	  </tr>
	</table>
	</html:form>
	<table width="100%" border="0" cellpadding="3" cellspacing="0">
		<tr>
			<td align="left">信息提示:<span id="msg" style="color:#ff0000"><%@ include file="/common/messages.jsp" %></span></td>
		    <td align="right">金额单位:万元</td>
		</tr>
	</table>
	</div>
	
	<div id="center1">
		<div id="tvcontainer" class="yui-navset">
		    <ul class="yui-nav">
		        <li class="selected"><a href="#tab1"><em>执行预算申报表</em></a></li>
		        <li><a href="#tab2"><em>执收成本申报表</em></a></li>
		    </ul>            
		    <div class="yui-content">
				<div id="dtcontainer1"></div>
		        <div id="dtcontainer2">sdfdsf</div>
		    </div>
		</div>
	</div>
	
<div id="resizablepanel">
    <div class="hd">选择单位</div>
    <div class="bd">
        <div id="treeDiv1"></div>
    </div>
    <div class="ft"></div>
</div>
    
<script type="text/javascript" src="/test/data.js"></script>
<script type="text/javascript">
(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;
 	var tree;
 	//加载树数据
	function loadNodeData(node, fnLoadComplete){
		var callBack=function(nodes){
			for (var i=0, j=nodes.length; i<j; i++) {
	            var tempNode = new YAHOO.widget.TextNode(nodes[i].dwbm+":"+nodes[i].dwmc, node, false);
	            tempNode.data = nodes[i];
	            if(nodes[i].sfmj==1){
	            	  tempNode.isLeaf = true;
	            }
	        }
		    fnLoadComplete();
        };
		budgetService.getBudgetTreeChild(callBack,node.data.nd,node.data.dwbm,node.data.jc);
	}
	//创建树-弹出的面板
    function init() {
        tree = new YAHOO.widget.TreeView("treeDiv1");
        //turn dynamic loading on for entire tree:
        tree.setDynamicLoad(loadNodeData);
        var root = tree.getRoot();
        //回调函数加入一级子树	  
        var callBack=function(nodes){
    	    for (var i=0, j=nodes.length; i<j; i++) {
                var tempNode = new YAHOO.widget.TextNode(nodes[i].dwbm+":"+nodes[i].dwmc, root, false);
                tempNode.data = nodes[i];
                tempNode.labelElId=nodes[i].dwbm;
                if(nodes[i].sfmj==1){
             	    tempNode.isLeaf = true;
               }
            }
    	    tree.draw();
        }
        budgetService.getBudgetTreeRoot(callBack,2010);
       
        tree.subscribe('clickEvent',function(oArgs) {
            var nodeData = oArgs.node.data;
            if(nodeData.sfmj == 1){
		 		document.getElementById("dwbm").value = nodeData.dwbm;
		 		document.getElementById("dwmc").value = nodeData.dwmc;
		 		document.getElementById("dwnm").value = nodeData.dwnm;
				panel.hide();
				//alert($("dwbm").value);
				//getBudgetData(true); 	
			}
	   });
		
		// Create a panel Instance, from the 'resizablepanel' DIV standard module markup
        var panel = new YAHOO.widget.Panel("resizablepanel", {
            draggable: true,
            width: "350px",
            height: "400px",
            autofillheight: "body", // default value, specified here to highlight its use in the example
            constraintoviewport:true,
            visible:false, 
            fixedcenter: true,
            context: ["showbtn", "tl", "bl"]
        });
        panel.render();

		// Create Resize instance, binding it to the 'resizablepanel' DIV 
	    var resize = new YAHOO.util.Resize("resizablepanel", {
	        handles: ["br"],
	        autoRatio: false,
	        minWidth: 300,
	        minHeight: 100,
	        status: false 
	    });
	
		resize.on("startResize", function(args) {
		   if (this.cfg.getProperty("constraintoviewport")) {
		             var D = YAHOO.util.Dom;
		
		             var clientRegion = D.getClientRegion();
		             var elRegion = D.getRegion(this.element);
		
		             resize.set("maxWidth", clientRegion.right - elRegion.left - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
		             resize.set("maxHeight", clientRegion.bottom - elRegion.top - YAHOO.widget.Overlay.VIEWPORT_OFFSET);
		      } else {
		             resize.set("maxWidth", null);
		             resize.set("maxHeight", null);
		  	}
		}, panel, true);
		
		resize.on("resize", function(args) {
	        var panelHeight = args.height;
	        this.cfg.setProperty("height", panelHeight + "px");
	    }, panel, true);
		
		YAHOO.util.Event.on("showbtn", "click", panel.show, panel, true);
    //}
    
    //选项卡+表格
	    YAHOO.example.TabView = function(items) {
	        //-------------------------begin first table-------------------------------------------------------
			var drmoney = function(elCell, oRecord, oColumn, oData, oDataTable) {
				//alert(oDataTable);
	            elCell.innerHTML = String(Number(oData).toFixed(2));
	           // DataTable.formatCurrency ( el , oRecord , oColumn , oData , oDataTable ) 
	        };
	        
	        //预算用的数据源和表格        
	        var myColumnDefs1 = [
	            {key:"srlbmc", label:"项目类别", sortable : false, resizeable:true},
	            {key:"xmbm", label:"项目编码", sortable : true,resizeable:true},
	            {key:"xmmc",label:"项目名称", sortable : false, resizeable:true},
	            {key:"dnzsze", label:"<font color='blue'>当年征收总额</font>", formatter:drmoney,sortable : true, resizeable : true, editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true,validator:YAHOO.widget.DataTable.validateNumber})},
	            {key:"fczr", label:"<font color='blue'>分成转入</font>", formatter:drmoney, sortable : true, resizeable : true, editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true,validator:YAHOO.widget.DataTable.validateNumber})},
	            {key:"fczc", label:"<font color='blue'>分成转出</font>",formatter:drmoney, sortable : true, resizeable : true, editor: new YAHOO.widget.TextboxCellEditor({disableBtns:true,validator:YAHOO.widget.DataTable.validateNumber})},
	            {key:"dnyshj", label:"当年预算合计",formatter:drmoney, sortable : true, resizeable:true},
	            {key:"ybys", label:"一般预算", formatter:drmoney, sortable : false, resizeable:true},
	            {key:"jjys", label:"基金预算", formatter:drmoney, sortable : false, resizeable:true},
	            {key:"gyzbys", label:"国有资本经营预算", formatter:drmoney, sortable : false, resizeable:true},
	            {key:"zhgl", label:"专户管理", formatter:drmoney, sortable : false, resizeable:true},
	            {key:"sndys", label:"上年度预算数", formatter:drmoney, sortable : false, resizeable:true},
	            {key:"yszjs", label:"比上年增减数", formatter:drmoney, sortable : false, resizeable:true},
	            {key:"zscb", label:"执收成本",formatter:drmoney, sortable : true, resizeable:true},
	            {key:"zscbrate", label:"成本占预算%", formatter:drmoney, sortable : true, resizeable:true}
	        ];
				
			var myDataSource1 = new YAHOO.util.DataSource(items);
	        myDataSource1.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	        myDataSource1.responseSchema = {
	            fields: ["srlbmc","xmbm","xmmc","dnzsze","fczr",
	            		 "fczc","dnyshj","ybys","jjys","gyzbys",
	            		 "zhgl","sndys","yszjs","zscb","zscbrate"]
	        };
	        
		    myDataTable1 = new YAHOO.widget.ScrollingDataTable("dtcontainer1",
		                myColumnDefs1, myDataSource1,{width:"100%",height:"32em",
		                //animate: true,dompath: true, autoHeight: true ,
		                draggableColumns:true});
		                
		    // Set up editing flow
	        var highlightEditableCell = function(oArgs){
	        	//var eObject = oArgs.event;
	            var elCell = oArgs.target;
	            //alert(elCell.innerHTML);
	            if(YAHOO.util.Dom.hasClass(elCell, "yui-dt-editable")){
	                this.highlightCell(elCell);
	            }
	        };
	        
	        myDataTable1.subscribe("cellMouseoverEvent", highlightEditableCell);
	        myDataTable1.subscribe("cellMouseoutEvent", myDataTable1.onEventUnhighlightCell);
	        //myDataTable1.subscribe("cellClickEvent", myDataTable1.onEventShowCellEditor);
	        myDataTable1.subscribe("cellClickEvent", function(){
	        	//alert("hello");
	        	if(!myDataTable1.thisRow.islastRow){//如果不是最后一行就可编辑
	        		myDataTable1.thisRow.editable=false;
	        	}else{//如果是最后一行就不可编辑
	        		myDataTable1.thisRow.editable=true;
	        	}
	        });
		    
		    //getData = function(count){
            //    return {row:globalDataCount, one:"one", two:"two", three:"three"};
            //};
		    //myDataTable1.addRow(getData(), 2); 
		    
	        //-------------------------end first table-------------------------------------------------------
	
	       var myTabView = new YAHOO.widget.TabView("tvcontainer");
	       //myTabView.getTab(1).addListener("click", function() {myDataTable2.onShow()});        
			
			var layout = new YAHOO.widget.Layout({
	            units: [
	                { position: 'top', height: 140, body: 'top1', header: '征收管理&gt;&gt;收入预算&gt;&gt;预算申报', gutter: '0px', collapse: true, resize: false,scroll : true },
	                { position: 'center', body: 'center1',scroll: true,gutter: '0 0 1 0' }
	            ]
	        });
	        
	        layout.on('resize', function() {
                if (myDataTable1) {
                    myDataTable1.set('height', (this.getSizes().center.h - 68) + 'px');
                    myDataTable1._syncColWidths();
                }
            }, layout, true);
                
	        layout.on('render', function() {
	        	myDataTable1.set('height', (this.getSizes().center.h - 68) + 'px');
	        }, layout, true);  
	        
	        layout.render();
        
	       return {
	           oDS1: myDataSource1, 
	           oDT1: myDataTable1,
	           oTV: myTabView
	       };
	   };
	   budgetService.getBudgetData("2010","0010103",true,YAHOO.example.TabView);
    }
    //创建树-弹出面板、选项卡+表格、布局
    Event.onDOMReady(init);
})();

function changeYear(form){
    //alert("year:"+document.getElementById("nd").value);
	form.action = "/budget.do?method=apply";
	form.submit();
}
</script>
</body>
</html>

YUI