本文介绍了一种使用JavaScript动态创建和管理页面的方法，包括页面的添加、编辑、保存及切换。通过实例展示了如何利用Handsontable实现类似Excel的表格功能，包括全选、数据填充等，同时分享了在前后端交互、单双击事件处理和全局变量管理方面的经验。
目录
情形：需求
实现：分析 实现
页面：前端
总结：仔细再仔细
情形：
最近遇到这样一个情况：
- 需要实现动态增加页面，可以添加页面，页面的内容需要能保存，修改和删除。
- 页面的名字可编辑，并且要实现单击页面切换，双击编辑页面名字文本。
最后结果就是这样：
实现：
最先开始决定用组建，先找的bootspript的表格，但是后来发现这个组建并不能满足我的需求，他无法添加可编辑名字的页面。随即放弃。再在后来决定使用js 拼接按钮的方式动态拼接html元素的方式实现页面添加。但是此方法需要注意3个点要处理好：
- 多个页面的数据存取都是用同一个数据库同一张表。
- js拼接的只能是button元素，因为需要绑定单双击事件，需要使用一个span标签和input标签来回切换。
- 各个拼接的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这个表格 个人感觉比较重要的方法：
申明/初始化表格的时候（在表格中设置的效果）：
- 设置列头： 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 '';
}
}, - 各列占的宽度（不能用百分比，精确数字PX）：colWidths : [50,325,325,0,0],
- 要隐藏的列：hiddenColumns : {
columns : [3,4],
}, //只显示0 1,2 三列，4,5 列隐藏，用于传值 - 给表格加个行头，在表格的最左侧固定加一列序号：1,2...，从rowHeaders:true,
- 全选：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); } -
设置列的类型以及类型：columns : [ {
data : 'ischecked',
type : 'checkbox'
},{
data : 'textName',
type : 'text',
//renderer : rightDescriptionRenderer,
}, {
data : 'value',
type : 'text'
},
{
data : 'ConfresourceID',
type : 'text'
},
{
data : 'projectVersionResourceID',
type : 'text'
} ]
}); -
前面的复选框：复选框单独占一列，因此列头需要加一列， 就是列头的case 0: ，此外，columns 需要将type属性改为checkbox，data就是列的业务名字，到时候取值的拿data的内容就可以拿到数据。
-
hotTable.loadData(originalData);//给表格赋值 这里的originalData 必须是数组或数组对象，否则前台就会报错loadData（） 未定义。
表格加载完成之后（表格数据的获取）：
- 获取所有的行数： var countRows = hotTable.countRows();
- 获取对应行数的列的textName的数据; hotTable.getDataAtRowProp(i,'textName');
- 获取某列的全部数据：hotTable.getDataAtProp("ConfresourceID");
- 增加/删除页面的一行数据： hotTable.alter('insert_row', 行数); //增加 hotTable.alter('remove_row',行数);//删除
- 给表格第0行 第1列 单元格赋值" " : hotTable.setDataAtCell(0,1,"");
- 一些其他的方法参照：https://blog.youkuaiyun.com/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....");
扫一扫
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
