目录
情形：需求
实现：分析 实现
页面：前端
总结：仔细再仔细
情形：
最近遇到这样一个情况：
- 需要实现动态增加页面，可以添加页面，页面的内容需要能保存，修改和删除。
- 页面的名字可编辑，并且要实现单击页面切换，双击编辑页面名字文本。
最后结果就是这样：
实现：
最先开始决定用组建，先找的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.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....");
