精华内容
下载资源
问答
  • <!doctype html> <html> <head> <meta charset="utf-8"> ...text/javascript" src="../jquery/jquery-2.1.1.

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>无标题文档</title>

    <script type="text/javascript" src="../jquery/jquery-2.1.1.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

     

    var a={}

    var num1;

    var num2;

    var num3;

    var num4;

    //取随机数

    function getNum(){

    while(true){

    var b = Math.round(Math.random()*100).toString().substr(0,2);

    if(b.toString().length === 2 && a[b] === undefined){

    return a[b]=b;

    }

    }

    };

     

    //添加表格

    $("#aa").bind("click",function(){

    num1=0;

    num2=0;

    num3=0;

    num4=0;

    num1+=parseFloat(getNum());

    num2+=parseFloat(getNum());

    num3+=parseFloat(getNum());

    num4+=parseFloat(getNum());

    var $add=$("<table id='table1' width='500' border='1'><tr><td id='num1' width='127'>"+num1+"</td><td id='num2' width='127'>"+num2+"</td><td width='120' id='heji1'>合计:</td><td width='100'><input style='width:80px;' class='add' id='add1' type='button' value='求和'></td></tr><tr><td id='num3'>"+num3+"</td><td id='num4'>"+num4+"</td><td id='heji2'>合计:</td><td><input style='width:80px;' class='add' id='add2' type='button' value='求和'></td></tr></table>");

    //选定添加、否则删除

    if(this.checked){

    //动态添加click事件

    $add.find(".add").click(qiuhe);

    $("body").append($add);

    }else{

    $("body > table").remove();

    }

     

     

    });

     

    $("#bb").bind("click",function(){

    var $add=$("<div><img src='img/超神学院.jpg' width='300' height='200'>&nbsp<img src='img/海贼王.jpg' width='300' height='200'></div>");

    //选定添加、否则删除

    if(this.checked){

    $("body").append($add);

    }else{

    $("body > div").remove();

    }

     

     

    });

     

    //求和计算

    function qiuhe(){

    var b=$(this).attr("id").substr(3,1);

    if(b=="1"){

    var sum=0;

    sum+=Number(num1);

    sum+=Number(num2);

    var $td=$("<td id='heji1' width='120'>合计:"+sum+"</td>");

    $("#heji1").replaceWith($td);//替换td

    }else{

    var sum=0;

    sum+=Number(num3);

    sum+=Number(num4);

    var $td=$("<td id='heji2' width='120'>合计:"+sum+"</td>");

    $("#heji2").replaceWith($td);

    }

       };

    });

    </script>

    </head>

     

    <body>

    AA:<input name="" type="checkbox" value="" id="aa">

    BB:<input name="" type="checkbox" value="" id="bb">

    </body>

    </html>

     

    展开全文
  • 本文件利用 AJAX 和JavaScript实现了动态生成表格,以及对表格修改,删除多行返回数据库更新.可以选中单行,不连续的多行,和连续的多行(shift 拖选),在前台按列排序. 仿excel,在前台按列进行排序,倒序等 欢迎大家...
  • 目录 情形:需求 实现:分析 实现 页面:前端 总结:仔细再仔细 ...需要实现动态增加页面,可以添加...最先开始决定用组建,先找的bootspript的表格,但是后来发现这个组建不能满足我的需求,他无法添加可编辑名...

    目录

    情形:需求

    实现:分析 实现

    页面:前端

    总结:仔细再仔细


    情形:

    最近遇到这样一个情况:

    1. 需要实现动态增加页面,可以添加页面,页面的内容需要能保存,修改和删除。
    2. 页面的名字可编辑,并且要实现单击页面切换,双击编辑页面名字文本。

    最后结果就是这样:

    实现:

    最先开始决定用组建,先找的bootspript的表格,但是后来发现这个组建并不能满足我的需求,他无法添加可编辑名字的页面。随即放弃。再在后来决定使用js 拼接按钮的方式动态拼接html元素的方式实现页面添加。但是此方法需要注意3个点要处理好:

    1. 多个页面的数据存取都是用同一个数据库同一张表。
    2. js拼接的只能是button元素,因为需要绑定单双击事件,需要使用一个span标签和input标签来回切换。
    3. 各个拼接的button的id需要唯一,其中的span和input的id也要唯一

    js拼接html代码:需要从别的html粘一个按钮过来,或者自己写也行。注意" "和' '使用,让变量和常量区分开来,如果你定义的整体是" ",那么变量使用 "+变量+" 的方式拼接,常量用 '常量'的方式拼接。相反,你的整体使用 ' ' 单引号的话,变量就要使用'+要传值的量+'来拼接。另外,onchange事件传值最好使用this 把这个input元素都传值过去,然后用this.value  this.id 的方式获取 id 和内容。

    下面是页面添加按钮绑定的方法:我采用button + span+ input 的方式 来实现对 button的单双击切换

    function addMicroserviceConfPage(){             	
    	//新建的时候不需要查之前的配置名字
    	//rememberName='';
    	var spanId="span_"+Math.floor(Math.random()*100000000);
    	var inputId="input_"+Math.floor(Math.random()*100000000);
    	var addTab="<button  style='margin-left:10px;margin-bottom:10px;' class='btn btn-default btn-style indexBtn checked'>"+
    			   "<span  id="+spanId+"></span>"+
    	           "<input id="+inputId+" value='请为当前配置文件命名'  style='border:none;width: 153px;color: black;'  onchange='changeConfNames(this);' /></button>";
    	$("#buttonDivTab").append(addTab);
    }          

     

    因为需要各个元素的id唯一,因此需要两种情况:

    1.数据库里没数据,按钮点击生成新页签的时候:此时文件名不存在,为了区分新建多个按钮的保存以及切换,我决定使用随机数来为span 和input 附上唯一的id,(Math.flow的意思是 向上取整数舍去小数)。

    2、数据库有数据,打开页面就要显示数据,按钮的名字必须是唯一的,此时不用随机数了,使用配置文件名字来区分各个按钮对应哪个页面。js 拼接代码如下:

    function findConfNameByPid(Pid){
    	var confNames=[];
    	$.ajax({
    		  async : false,
    		  cache:false,
    		  dataType:'json',
    		  type : 'POST', 
    		  url : '<%=basePath%>/project/findConfNameByPid', 
    		  data :{'projectVersionResourceID':Pid},
    		  success: function(result){
    			  confNames = result;
    			  allNamesForOnly=result;
    			  var ids=result;
    			  if(confNames.length==0){
    				  $("#buttonDivTab").empty();
    				  var spanId="span_"+Math.floor(Math.random()*100000000);
    				  var inputId="span_"+Math.floor(Math.random()*100000000);
    				  var addTab="<button  style='margin-left:10px;margin-bottom:10px' class='btn btn-default btn-style indexBtn checked'>"+
    				  			 "<span id="+spanId+"></span>"+	
    			                 "<input id="+inputId+" value='请为当前配置文件命名'  style='border:none;width: 153px;color: black;' onchange='changeConfNames(this)' />"+
    			                 "</button>";
    				  $("#buttonDivTab").append(addTab);
    				  
    			  }else{
    				  $("#buttonDivTab").empty();
    			      for(var i=0;i<confNames.length;i++){
    					if(i==0){//第一个tab默认显示选中的样式
    						var idNames=ids[i].split(".");
    						var spanId="span_";
    						var inputId="input_";
    						if(idNames.length!=0){
    							for(var j=0;j<idNames.length;j++) {
    								spanId+=idNames[j];
    								inputId+=idNames[j];
    							}
    						}  
    						var addTab="<button  style='margin-left:10px;margin-bottom:10px' class='btn btn-default btn-style indexBtn checked'>"+
    						           "<span name='spName' id="+spanId+">"+confNames[i]+"</span>"+	
    							       "<input name='btnName' id="+inputId+" value="+confNames[i]+"  style='border:none;width: 153px;display:none;color: black;' onchange='changeConfNames(this)' /></button>";
    						$("#buttonDivTab").append(addTab);
    						
    					}else{
    					     //为 span 和input 赋值唯一的id
    						 var idNames=ids[i].split(".");
    						 var spanId="span_";
    						 var inputId="input_";
    						 if(idNames.length!=0){
    							for(var j=0;j<idNames.length;j++) {
    								spanId=spanId+idNames[j];
    								inputId=inputId+idNames[j];
    							}
    						 }  
    
    					    var addTab="<button  style='margin-left:10px;margin-bottom:10px' class='btn btn-default btn-style unchecked indexBtn'>"+
    					    		   "<span name='spName' id="+spanId+">"+confNames[i]+"</span>"+	
    							       "<input name='btnName' id="+inputId+" value="+confNames[i]+" style='border:none;width: 153px;display:none;' onchange='changeConfNames(this)' /></button>"; 
    					    $("#buttonDivTab").append(addTab);
    					 }
    				  }
    			  }
    			 
    				 
    		  }
    	 });
    
    	if(confNames.length!=0 && confNames !=null && confNames !=""){
    		confName=confNames[0]; //第一个文件名
    	}else{
    		confName='请为当前配置文件命名'; //没数据给默认值name
    	}  
    	 
    }

    对应的onchange事件处理如下:

    function changeConfNames(e){
    	var valueName=e.value;
    	var idName="#"+e.id;
    	confName=valueName;
    	if(allNamesForOnly!="" && valueName!=""){	
    		if(allNamesForOnly.indexOf(valueName)!=-1){
    			$(idName).val("");
    			alertMsg("当前配置文件名字已经存在","info");
    		}
    	}
    }

    其中的allNamesForOnly 是全局变量 ,在页面加载的时候会将数据库里的文件名加载过来,用来确认是否重复。

    (全局变量虽然方便,但是用完就要释放掉,不释放一般情况下不影响,但是一旦印象,那种经历你会一直记得,因为全局变量造成的bug不好复现,但是偶然的出现会让你摸不着头脑。)

    单双击切换实现的代码:

    //单击 切换页面   双击 编辑文本
    $(document).ready(function(){
    	   var timer = null;
       	   $("#buttonDivTab").on("click","button",function(){
               clearTimeout(timer);
               $(this).addClass("checked");
      		   $(this).siblings().removeClass("checked");
      		   $(this).siblings().addClass("unchecked");
               confName=$(this).find("input").val(); 
               
               timer = setTimeout(function() { //在单击事件中添加一个setTimeout()函数,设置单击事件触发的时间间隔 
     
    	   			var rightData;	
          			$.ajax({
          				  async : false,
          				  cache:false,
          				  dataType:'json',
          				  type : 'POST',  
          				  url : '<%=basePath%>/project/findConfByProjectAndName',// findConfByProject 查全部   findConfByProjectAndName 查名字对应的内容
          				  data :{'projectVersionResourceID':Pid,
          					  'confName':confName},
          				  success: function(result){
          					  rightData = result;
          					  removeData = [];
          					 // confName='';
          				  }
          			 });
          			 hotTable = $("#microserviceTable").data('handsontable');//获取表格的值
          			 var originalData = eval(JSON.stringify(rightData.rightData));
          			 if(originalData!= null && originalData!=""){
          			 	hotTable.loadData(originalData);//给表格赋值 
          			 }else{
          				 hotTable.loadData(eval('[{"textName":"","ConfresourceID":"","value":""}]'));
          			 } 
          			// 恢复成butten状态
          			var ids=confName; 			
                    var idNames=ids.split(".");
    	   		    var spanId="#span_";
    	   		    var inputId="#input_";
    	   		    if(idNames.length!=0){
    	   				for(var i=0;i<idNames.length;i++) {
    	   					spanId+=idNames[i];
    	   					inputId+=idNames[i];
    	   				}
    	   		    } 
          			$(spanId).show();
          			$(inputId).removeAttr("style");
        			$(inputId).attr("style","display:none;");
                   //$("input[name='btnName']").attr("style","display:none;");
                    //$("span[name='spName']").show();
    
        			
               }, 300);
           });
           $("#buttonDivTab").bind("dblclick", function() { //双击事件 
                clearTimeout(timer); //在双击事件中,先清除前面click事件的时间处理            
                rememberName=confName;
                 var ids=confName;
                 var idNames=ids.split(".");
    		     var spanId="#span_";
    		     var inputId="#input_";
    		     if(idNames.length!=0){
    				for(var i=0;i<idNames.length;i++) {
    					spanId+=idNames[i];
    					inputId+=idNames[i];
    				}
    		    }
    			$(spanId).hide();
    			$(inputId).removeAttr("style");
    			$(inputId).attr("style","border:none;color: black;");
    			 
           }); 
    
    });	

    单击 给当前button添加选中的样式,去掉其他button的样式,然后触发点击事件,获取button 的input标签的value去数据库查值,之后重新加载表格。

    双击: button 的span 隐藏 ,input 输入框 去掉隐藏样式显示到button中来,需要注意的是:

    单双击时间绑定在同一个元素上是会冲突的,双击事件失效,永远是触发的是单击事件。处理方式加一个事件执行时间的函数。在单双击事件执行之前放空执行时间。一般是在单击事件加setTimeOut函数 ,通常加参数300毫秒。

    需要注意的是 :无论单双击 所有操作代码都要写在  clearTimeout(timer);  之后,才会触发双击事件。要先清空上次单击事件的时间。

    页面:

     页面的表格使用的handsontable,对新手不太友好的表格,因为关于他的资料太少了,估计用的人也不多。。。

    这个组建的好处就是能像excel一样处理数据,功能比较强大,它能完成全选+复制 然后ctrl+v 表格能粘贴所有的数据过来(但我看来,bootstrpttable 一样厉害),他的数据源必须是数组或者数组对象。代码:

     $('#microserviceTable').handsontableExpand().handsontable(
        		{
        			startRows : 0,
        			colHeaders : function(col) {
        				switch (col) {
        				case 0:
        					return '';
        				case 1:
        					return '<span style="float: center;">当前工程配置</span>';
        				case 2:
    	    				return '<span style="float: center;">说明信息</span>';
        				case 3:
    	    				return '';	
        				case 4:
    	    				return '';
        				}	
        			},
        			colWidths : [50,325,325,0,0],
        			hiddenColumns : {
        				columns : [3,4],
        			},
        			rowHeights: 35,
        			fillHandle:false,
        			fixedColumnsLeft:true,
        			rowHeaders:true,
        			autoWrapRow:true,
        			checkAllColumns:['ischecked'],
        			afterCheckAll:[{'column':'ischecked'}],
        			columns : [ {
        				data : 'ischecked',
        				type : 'checkbox'
        			},{
        				data : 'textName',
        				type : 'text',
        				//renderer : rightDescriptionRenderer,
        			}, {
        				data : 'value',
        				type : 'text'
        			},
        			{
        				data : 'ConfresourceID',
        				type : 'text'
        			},
        			{
        				data : 'projectVersionResourceID',
        				type : 'text'
        			}  ]
        		}); 
     	        $("#microserviceTable").handsontable('render');
    			 initMicroserviceTable(Pid);
    			 //展示 页面
    			 $("#distributeProjectDiv").panelRight('open');
    }
    
    //初始化表格
    function initMicroserviceTable(Pid){
    	var rightData;	
    
    	$.ajax({
    		  async : false,
    		  cache:false,
    		  dataType:'json',
    		  type : 'POST',  
    		  url : '<%=basePath%>/project/findConfByProjectAndName',
    		  data :{'projectVersionResourceID':Pid,
    			  'confName':confName},
    		  success: function(result){
    			  rightData = result;
    			  removeData = [];
    			 // confName='';
    		  }
    	 });
    	 hotTable = $("#microserviceTable").data('handsontable');//获取表格的值
    	 var originalData = eval(JSON.stringify(rightData.rightData));
    	 if(originalData!= null && originalData!=""){
    	 	hotTable.loadData(originalData);//给表格赋值 
    	
    	 }else{
    		 hotTable.loadData(eval('[{"textName":"","ConfresourceID":"","value":""}]'));
    	 }
    	 
    }

    handsontable这个表格 个人感觉比较重要的方法:

    申明/初始化表格的时候(在表格中设置的效果):

    1. 设置列头: colHeaders : function(col) {
                          switch (col) {
                          case 0:
                              return '';
                          case 1:
                              return '<span style="float: center;">当前工程配置</span>';
                          case 2:
                              return '<span style="float: center;">说明信息</span>';
                          case 3:
                              return '';    
                          case 4:
                              return '';
                          }    
                      },
    2. 各列占的宽度(不能用百分比,精确数字PX):colWidths : [50,325,325,0,0],
    3. 要隐藏的列:hiddenColumns : {
                          columns : [3,4],
                      }, //只显示0 1,2 三列,4,5 列隐藏,用于传值
    4. 给表格加个行头,在表格的最左侧固定加一列序号:1,2...,从rowHeaders:true,
    5. 全选:checkAllColumns:['ischecked'],  使用他需要引入一个js文件,handsontableExpand.js,你没有不要紧(我给你),你可以新建一个js文件,就以这个名字命名,内容我粘到这里,想体验的可以站过去,然后在你的页面引入你新建的页面,注意,这个全选的表格名字是hotTable写死的,需要你将自己的hangsontable表格名字也定义成hotTable。然后全选就可以了。js内容:(注意,引入js要确保路径正确,以当前的jsp为主,然后找js对应的位置)
      (function($, h, c) {
      	var a = $([]),
      	e = $.resize = $.extend($.resize, {}),
      	i,
      	k = "setTimeout",
      	j = "resize",
      	d = j + "-special-event",
      	b = "delay",
      	f = "throttleWindow";
      	e[b] = 250;
      	e[f] = true;
      	$.event.special[j] = {
      		setup: function() {
      			if (!e[f] && this[k]) {
      				return false;
      			}
      			var l = $(this);
      			a = a.add(l);
      			$.data(this, d, {
      				w: l.width(),
      				h: l.height()
      			});
      			if (a.length === 1) {
      				g();
      			}
      		},
      		teardown: function() {
      			if (!e[f] && this[k]) {
      				return false;
      			}
      			var l = $(this);
      			a = a.not(l);
      			l.removeData(d);
      			if (!a.length) {
      				clearTimeout(i);
      			}
      		},
      		add: function(l) {
      			if (!e[f] && this[k]) {
      				return false;
      			}
      			var n;
      			function m(s, o, p) {
      				var q = $(this),
      				r = $.data(this, d);
      				if(r==null){
      					var l = $(this);
      					$.data(this, d, {
      						w: l.width(),
      						h: l.height()
      					});
      					r = $.data(this, d);
      				}
      				r.w = o !== c ? o: q.width();
      				r.h = p !== c ? p: q.height();
      				n.apply(this, arguments);
      			}
      			if ($.isFunction(l)) {
      				n = l;
      				return m;
      			} else {
      				n = l.handler;
      				l.handler = m;
      			}
      		}
      	};
      	function g() {
      		i = h[k](function() {
      			a.each(function() {
      				var n = $(this),
      				p = this.parentNode,
      				m = n.width(),
      				l = n.height(),
      				o = $.data(this, d);
      				if ((!$(this).hasClass('wtHider')&&m !== o.w)||($(this).hasClass('wtHider')&& (l !== o.h||p.clientWidth!==$(p).width()||p.clientHeight!==$(p).height()))) {
      					n.trigger(j, [o.w = m, o.h = l]);
      				}
      			});
      			g();
      		},
      		e[b]);
      	}
      })(jQuery, this);
      HandsontableExpand = function(obj) {
      	var hot = obj.data('handsontable');
      	var handsontableExpand = this;
      	this.handsontable=function(settings){
      		obj.handsontable(settings);
      		hot = obj.data('handsontable');
      		if('checkAllColumns' in settings)
      			this.createAllCheck(settings['checkAllColumns']);
      		if('afterCheckAll' in settings){
      			var afterCheckAllArr = settings['afterCheckAll'];
      			for(i=0;i<afterCheckAllArr.length;i++)
      				this.afterCheckAll(afterCheckAllArr[i]['column'],afterCheckAllArr[i]['function']);
      		}
      		if('afterUndoRedo' in settings)
      			this.undoRedo(settings['afterUndoRedo']);
      		obj.find(".leftHead").parent().parent().css({'text-align': 'left','padding-left': '12px'});
      	}
      	this.undoRedo = function(afterBackOffOrForward) {
      		this.undo(afterBackOffOrForward);
      		this.redo(afterBackOffOrForward);
      	};
      	this.undo = function(afterBackOff) {
      		hot.undoRedo.undo = function() {
      			var flag = this.isUndoAvailable();
      			if (flag) {
      				var action = this.doneActions.pop();
      				this.ignoreNewActions = true;
      				var that = this;
      				action.undo(this.instance, function() {
      					that.ignoreNewActions = false;
      					that.undoneActions.push(action);
      				});
      			}
      			if (afterBackOff != null && afterBackOff != undefined) {
      				var nextflag = this.isUndoAvailable();
      				afterBackOff(flag, "Z", nextflag);
      			}
      		};
      	};
      	this.redo = function(afterForward) {
      		hot.undoRedo.redo = function() {
      			var flag = this.isRedoAvailable();
      			if (flag) {
      				var action = this.undoneActions.pop();
      				this.ignoreNewActions = true;
      				var that = this;
      				action.redo(this.instance, function() {
      					that.ignoreNewActions = false;
      					that.doneActions.push(action);
      				});
      			}
      			if (afterForward != null && afterForward != undefined) {
      				var nextflag = this.isRedoAvailable();
      				afterForward(flag, "Y", nextflag);
      			}
      		};
      	};
      	this.createOrRemoveRow = function(afterCreateRowFun, afterRemoveRowFun) {
      		this.createRow(afterCreateRowFun);
      		this.removeRow(afterRemoveRowFun);
      	};
      	this.createRow = function(afterCreateRowFun) {
      		var thisAfterCreateRow = hot.getSettings().afterCreateRow;
      		hot
      				.updateSettings({
      					afterCreateRow : function() {
      						var rows = hot.getData().length;
      						hot.updateSettings({
      							height : (35 * rows) + 45
      						});
      						if (thisAfterCreateRow != null
      								&& thisAfterCreateRow != undefined)
      							thisAfterCreateRow();
      						if (afterCreateRowFun != null
      								&& afterCreateRowFun != undefined)
      							afterCreateRowFun();
      					}
      				});
      	};
      	this.removeRow = function(afterRemoveRowFun) {
      		var thisAfterRemoveRow = hot.getSettings().afterRemoveRow;
      		hot
      				.updateSettings({
      					afterRemoveRow : function() {
      						var rows = hot.getData().length;
      						hot.updateSettings({
      							height : (35 * rows) + 45
      						});
      						if (thisAfterRemoveRow != null
      								&& thisAfterRemoveRow != undefined)
      							thisAfterRemoveRow();
      						if (afterRemoveRowFun != null
      								&& afterRemoveRowFun != undefined)
      							afterRemoveRowFun();
      					}
      				});
      	};
      	this.createRowPrevious = function(columnNameOrNum) {
      		var ischeckedArr;
      		if (typeof columnNameOrNum === "string")
      			ischeckedArr = hot.getDataAtProp(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number")
      			ischeckedArr = hot.getDataAtCol(columnNameOrNum);
      		var checkIndex = $.inArray(true, ischeckedArr);
      		var checkIndexNext = $.inArray(true, ischeckedArr, checkIndex + 1);
      		if (checkIndex >= 0) {
      			if (checkIndexNext < 0) {
      				hot.alter('insert_row', checkIndex);
      				return true;
      			} else {
      				alertMsg("请只选择一条数据插入上一行", "warning");
      				return false;
      			}
      		} else {
      			alertMsg("请选择一条数据插入上一行", "warning");
      			return false;
      		}
      	};
      	this.createRowNext = function(columnNameOrNum) {
      		var ischeckedArr;
      		if (typeof columnNameOrNum === "string") 
      			ischeckedArr = hot.getDataAtProp(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number") 
      			ischeckedArr = hot.getDataAtCol(columnNameOrNum);
      		var checkIndex = $.inArray(true, ischeckedArr);
      		var checkIndexNext = $.inArray(true, ischeckedArr, checkIndex + 1);
      		if (checkIndex >= 0) {
      			if (checkIndexNext < 0) {
      				hot.alter('insert_row', checkIndex + 1);
      				return true;
      			} else {
      				alertMsg("请只选择一条数据插入下一行", "warning");
      				return false;
      			}
      		} else {
      			alertMsg("请选择一条数据插入下一行", "warning");
      			return false;
      		}
      	};
      	this.isAllCheck=function(columnNameOrNum){
      		var ischeckedArr;
      		if (typeof columnNameOrNum === "string")
      			ischeckedArr = hot.getDataAtProp(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number") 
      			ischeckedArr = hot.getDataAtCol(columnNameOrNum);
      		var notCheckIndex = $.inArray(false, ischeckedArr);
      		var nullCheckIndex = $.inArray(null, ischeckedArr);
      		if(notCheckIndex<0&&nullCheckIndex<0) return true;
      		else return false;
      	};
      	this.updateWidth=function(newWidth) {
      		hot.updateSettings({colWidths : newWidth});
      	};
      	this.createAllCheck=function(columnNameOrNum) {
      		var allCheckColNum=[];
      		for(i=0;i<columnNameOrNum.length;i++){
      			if (typeof columnNameOrNum[i] === "string") 
      				allCheckColNum.push(hot.propToCol(columnNameOrNum[i]));
      			else if (typeof columnNameOrNum[i] === "number") 
      				allCheckColNum.push(columnNameOrNum[i]);
      		}
      		var thisColHeaders = hot.getSettings().colHeaders;
      		var thisAfterLoadData = hot.getSettings().afterLoadData;
      		var thisBeforeRender = hot.getSettings().beforeRender;
      		hot.updateSettings({colHeaders : function (col) {
      			if($.inArray(col, allCheckColNum)>-1){
      				var txt = "<input name='checkall"+col+"' type='checkbox' class='checker' ";
                      txt += obj.data('isChecked'+col) ? 'checked="checked"' : '';
                      txt += ">";
                      return txt;
      			}
      			if(thisColHeaders)
      				return thisColHeaders(col);
      		},
      		afterLoadData:function(){
      			for(i=0;i<allCheckColNum.length;i++)
      				obj.data('isChecked'+allCheckColNum[i],false);
      			obj.handsontable('render');
      			if(thisAfterLoadData)
      				thisAfterLoadData();
      		},
      		beforeRender:function(){
      			for(i=0;i<allCheckColNum.length;i++)
      				obj.data('isChecked'+allCheckColNum[i],handsontableExpand.isAllCheck(allCheckColNum[i]));
      			if(thisBeforeRender)
      				thisBeforeRender();
      		}
      		});
      		for(i=0;i<allCheckColNum.length;i++){
      			obj.on('mouseup', 'input[name=checkall'+allCheckColNum[i]+']', function (event) {
      				var num = parseInt($(this).attr("name").replace("checkall",""));
      				obj.data('isChecked'+num,!$(this).is(':checked'));
      				var checkedcol = hotTable.propToCol("ischecked");
      				hot.populateFromArray(0, num, [[!$(this).is(':checked')]], hot.countRows()-1, num);
      				var fun = obj.data('aftercheckfun'+num);
      				if(fun!=null)
      					fun();
      		    });
      		}
      	};
      	this.afterCheckAll=function(columnNameOrNum,fun){
      		var colnum;
      		if (typeof columnNameOrNum === "string") 
      			colnum=hot.propToCol(columnNameOrNum);
      		else if (typeof columnNameOrNum === "number") 
      			colnum=columnNameOrNum;
      		obj.data('aftercheckfun'+colnum,fun);
      	};
      }
      $.fn.handsontableExpand = function() {
      	return new HandsontableExpand(this);
      }

       

    6.  设置列的类型以及类型:columns : [ {
                          data : 'ischecked',
                          type : 'checkbox'
                      },{
                          data : 'textName',
                          type : 'text',
                          //renderer : rightDescriptionRenderer,
                      }, {
                          data : 'value',
                          type : 'text'
                      },
                      {
                          data : 'ConfresourceID',
                          type : 'text'
                      },
                      {
                          data : 'projectVersionResourceID',
                          type : 'text'
                      }  ]
                  }); 

    7. 前面的复选框:复选框单独占一列,因此列头需要加一列, 就是列头的case 0: ,此外,columns 需要将type属性改为checkbox,data就是列的业务名字,到时候取值的拿data的内容就可以拿到数据。

    8. hotTable.loadData(originalData);//给表格赋值   这里的originalData 必须是数组或数组对象,否则前台就会报错loadData() 未定义。

    表格加载完成之后(表格数据的获取):

    1. 获取所有的行数: var countRows = hotTable.countRows();
    2. 获取对应行数的列的textName的数据;  hotTable.getDataAtRowProp(i,'textName');
    3. 获取某列的全部数据:hotTable.getDataAtProp("ConfresourceID");
    4. 增加/删除页面的一行数据:     hotTable.alter('insert_row', 行数);  //增加 hotTable.alter('remove_row',行数);//删除
    5. 给表格第0行 第1列 单元格赋值" " : hotTable.setDataAtCell(0,1,"");
    6. 一些其他的方法参照:https://blog.csdn.net/qianqianyixiao1/article/details/81507257

    这个table 的增加 单元格和删除 是这样的:

    //增加行
    var rowID=0;
    function addRowsByNewBut(){
    	rowID=rowID-1;
    	hotTable.alter('insert_row', 0);  
    	hotTable.setDataAtCell(0,1,"");
    }
    
    //页面上移除数据
    var ischeckedArr = hotTable.getDataAtProp("ischecked");    	 
    //计数
    var num=0; 
    for(var i=0;i<ischeckedArr.length;i++){
    	if(ischeckedArr[i]) { 
    		hotTable.alter('remove_row',i-num);
             num++;
    	} 
    }

    主要是hotTable.alter(); 这个方法。批量删除的时候需要定义一个num用来记录选中的行数。

    总结:

    •    拼接代码的时候要仔细,不行就在w3c 和菜鸟教程上 利用假数据动态验证
    •    前端js和html css 知识点也很多 ,不知道真做不出来,都要了解
    •    js全局变量一定要释放,java有虚拟机,js解释性弱类型语言,需要手动释放
    •    多个使用多个class 样式的选择器 可以用"."连接 如:$(".class1.class2.class3....");
    展开全文
  • JavaScript笔记

    2018-09-28 11:21:56
    4.变量:js中的变量不需要提前指定类型,由赋值时动态决定 所有的变量都用var声明 5.数据类型: |--String(字符串类型) |--Number(数字类型) |--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该...
  • 9.30 动态创建表格并实现分页 9.31 删除表格指定行 9.32 设置表格的交替行颜色 9.33 双击单元格变为可编辑 9.34 鼠标经过表格时列变色 9.35 鼠标选择表格中的多行 9.36 使用JavaScript表格中写入数据 9.37 类C# ...
  • JavaScript王者归来

    2013-01-10 11:30:48
    12.6 读写数据--添加、修改和删除属性 12.7 外观与行为 12.7.1 DOM样式属性 12.7.2 控制DOM元素的显示与隐藏 12.7.3 改变颜色和大小--一个简单有趣的例子 12.7.4 改变位置--创建一个绕圆圈旋转的文字 12.7.5 编辑...
  • JavaScript网页特效范例宝典源码

    千次下载 热门讨论 2013-09-04 10:40:38
    实例295 将页面中的表格导出到Word打印 465 实例296 打开指定的Word文档打印 467 实例297 在JSP中利用Word自动打印指定格式的会议记录 468 实例298 在ASP中利用Word自动打印指定格式的会议记录 470 实例299 在...
  • 通过《JavaScript宝典(第6版)》的学习,读者可以根据实际需要制作出自己的动态网页,全方位拓展自己的网页设计知识和基本技能。 《JavaScript宝典(第6版)》内容全面、示例典型,适合各层次的网页设计人员学习和参考...
  • 《疯狂软件教育标准教材:疯狂HTML 5/CSS 3/JavaScript讲义》对HTML 5、CSS 3、JavaScript的介绍是“从零开始”的,因此阅读《疯狂软件教育标准教材:疯狂HTML 5/CSS 3/JavaScript讲义》不需要额外的基础。...
  • 21天学通javascript(第2版)(顾宁燕) pdf扫描版

    千次下载 热门讨论 2014-09-26 12:40:11
    7.4.7 扩充数组—添加元素生成新数组 148 7.4.8 更新移动数据—删除、替换或插入数组元素 149 7.4.9 生成特定数据—获取数组中的一部分元素 151 7.4.10 置换数据—颠倒数组元素的顺序 151 7.4.11 数据排序—对...
  • 练习3-4 动态加载页面传递参数 314 第4单元 315 练习4-1 简单地验证用户登录 315 练习4-2 猜数字 316 练习4-3 创建一个简单的购物网站 319 练习4-4 简单聊天室功能 321 第5单元 324 练习5-1 显示指定扩展名的...
  • 不明飞行物-源码

    2021-02-16 18:35:14
    HTML文档还利用面向对象的编程语言JavaScript从页面获取输入,根据从这些用户输入接收的值来修改/构建HTML表。 在本次挑战赛中,我们将为每个类别添加过滤器,以便用户可以过滤来自data.js的数据以根据每个类别的...
  • 实例097 应用Java程序片段动态生成表格 实例098 应用Java程序片段动态生成下拉列表 实例099 同一页面中的多表单提交 实例100 在JSP脚本中插入JavaScript代码 实例101 将页面转发到用户登录页面 4.2 JSP内置...
  • 11.2.2 建立自修改网页 526 11.2.3 设置页面的背景色 532 11.2.4 在运行时重装图像 532 11.2.5 打开一个新浏览器窗口 533 11.2.6 配置和写入一个新窗口 537 11.2.7 建立Alert对话框 539 11.2.8 建立Confirmation...
  • 第6章 利用JavaScript开发动态文档 203 6.1 简介 203 6.2 元素定位 204 6.2.1 绝对定位 204 6.2.2 相对定位 207 6.2.3 静态定位 208 6.3 移动元素 208 6.4 元素可见性 211 6.5 修改颜色和字体 212 6.5.1 ...
  • 实例158 动态使用表格 260 实例159 PlaceHolder容器控件的使用 262 实例160 设置Web窗体的默认焦点控件 263 实例161 设置Web窗体的默认按钮 264 实例162 应用ViewState保存数据信息 265 实例163 默默无闻——隐藏域...
  • 实例158 动态使用表格 260 实例159 PlaceHolder容器控件的使用 262 实例160 设置Web窗体的默认焦点控件 263 实例161 设置Web窗体的默认按钮 264 实例162 应用ViewState保存数据信息 265 实例163 默默无闻——隐藏域...
  • 实例158 动态使用表格 260 实例159 PlaceHolder容器控件的使用 262 实例160 设置Web窗体的默认焦点控件 263 实例161 设置Web窗体的默认按钮 264 实例162 应用ViewState保存数据信息 265 实例163 默默无闻——隐藏域...
  • 主机管理项目动态调用插件进行数据解析 主机管理项目对模块中的参数进行解析 第24周 本节题纲 上节内容回顾 ModelForm操作及验证 ajax操作-原生ajax ajax操作-JQuery的ajax ajax操作-伪ajax(iframe) ajax操作-...
  • 实例199 动态调整MSHFlexGrid表格中字段的 顺序 358 实例200 提高数据输入速度 359 实例201 设置奇、偶行颜色不同的表格 361 实例202 在MSHFlexGrid控件中显示图片 362 实例203 利用MSHFlexGrid控件的排序功能...
  • 实例199 动态调整MSHFlexGrid表格中字段的 顺序 358 实例200 提高数据输入速度 359 实例201 设置奇、偶行颜色不同的表格 361 实例202 在MSHFlexGrid控件中显示图片 362 实例203 利用MSHFlexGrid控件的排序功能...
  • ASP.NET 4高级程序设计(第4版)》【原版书为:Pro ASP.NET 4 in C# 2010】是ASP.NET领域的鸿篇巨制,全面讲解了ASP.NET4的各种特性及其背后的工作原理,给出了许多针对如何构建复杂、可扩展的网站从实践中得出的...
  • 400个DreamWeaver插件

    2013-03-28 15:30:13
    mxp/检查当前文件的兼容性和可能包含的错误,会给出详细的检测报告 mxp/在代码编辑框中选择一段脚本代码,然后使用这个插件,可以把这些代码放到一个单独的js文件中 mxp/在Dreamweaver中快速的插入一个Fireworks...
  •  《asp.net 4高级程序设计:第4版》是asp.net 领域的鸿篇巨制,全面讲解了asp.net 4 的各种特性及其背后的工作原理,给出了许多针对如何构建复杂、可扩展的网站从实践中得出的建议。本书还深入讲述了其他asp.net ...
  • 重新渲染整个视图的方式可以稍微修改一下:用 JavaScript 对象表示 DOM 信息和结构,当状态变更的时候,重新渲染这个 JavaScript 的对象结构。当然这样做其实没什么卵用,因为真正的页面...
  • HTML与CSS入门经典(第7版

    热门讨论 2012-09-03 21:50:17
    本书将使用HTML和CSS创建发布网页的过程分解成简单的步骤,详细 阐述其中的每一步,让读者能够迅速掌握。全书分6个部分,包括24章和4个 附录。第一部分简要地介绍了HTML和XHTML阐述了网页的创建过程和发布步 骤...
  • 电子印章管理控件可修改远程服务器上的电子印章,保存回服务 器。助您构建具有电子印章功能的网络文档编辑及文档内容安全综合解决方案。 6 支持PDF、TIF、VISIO文档阅读 支持visio文档阅读,支持PDF及TIF阅读,...
  • 实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r($_ENV) 73 实例042 使用可变变量输出“I Like PHP!” 73 实例...
  • 实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r($_ENV) 73 实例042 使用可变变量输出“I Like PHP!” 73 实例...
  • asp.net知识库

    2015-06-18 08:45:45
    HttpModule 实现 ASP.Net (*.aspx) 中文简繁体的自动转换,不用修改原有的任何代码,直接部署即可! 服务器自定义开发二之客户端脚本回发 Web开发: 使用URL重写WEB主题切换 如何在Asp.Net1.1中实现页面模板(所谓的...

空空如也

空空如也

1 2 3 4
收藏数 65
精华内容 26
关键字:

动态表格javascript并修改

java 订阅