js實現決策表
阿新 • • 發佈：2017-05-11
proto collect += light htm 改變 使用 modal adl
最近一段時間一直在做決策表的研發。編寫的過程及其殘忍，當看到結果的那一刻感覺還是不錯的喲。
寫之前在網上搜過，沒有找到，所以決定附上代碼，跟大家分享一下。
決策表功能如下：
這裏的彈出框調用的是bootsrap的組件，所以代碼僅供參考，復制上去功能是出不來的，js具體代碼如下：
/**
* Created by jiqingkuo
*/
define([
"PDUtilDir/grid",
"PDUtilDir/util",
"PDUtilDir/tool",
"PDUtilDir/dialog",
"PDUtilDir/searchBlock",
‘CommonUtilUploadDir/lar-upload-logo‘,
‘CommonUtilUploadDir/lar-upload-single‘,
"CommonUtilCkEditorDir/ckeditor"],
function(Grid, Util, Tool,Dialog,SearchBlock,LarUploadLogo,LarUploadSingle){
var grid;
var tableJson = {
ruleId:"",
type:"",//結果節點 為空不可添加刪除條件
condition:[],
result:[]
};
//獲取html 條件 標簽元素
var $tbody=$("#tbody");
var $thead=$("#thead");
//獲取 結果 HTML 元素
var $resThead=$("#resThead");
var $result=$("#result");
//定義布爾值 checkbox選中狀態
var isBool;
/**
* 構造一個DecisionTable函數
*/
function DecisionTable(data){
DecisionTable.initData.call(this,data);
}
/**
* 初始化數據
*/
DecisionTable.initData = function(data){
if(data === undefined){
$.ajax({
type:‘GET‘,
url:getServer()+‘/static/app/collection/decisionTable/tb.json‘,
dataType:‘JSON‘,
success:function(data){
DecisionTable.renderTable.call(this,data);//渲染tbody
}
});
}else{
DecisionTable.renderTable.call(this,data);//創建決策表
}
}
/**
* 根據已有Json 渲染tbody
*/
DecisionTable.renderTable=function(data){
//判斷ruleId為空 調用條件添加 創建決策表
if(data.ruleId!==‘‘ ){
html=‘‘;
$thead.empty();
$tbody.empty();
tableJson=data;
DecisionTable.prototype.renderData(data)
}
DecisionTable.init(this,data);
}
/**
* 初始化
* 事件綁定
*/
DecisionTable.init = function(node){
DecisionTable.bindAddConditionButtonEvent(this,node);
DecisionTable.bindSetResultButtonEvent(this,node);
DecisionTable.bindDeleteButtonEvent(this,node);
DecisionTable.bindSaveButtonEvent(this,node);
}
/**
* 點擊添加事件
*/
DecisionTable.bindAddConditionButtonEvent = function(node){
$(‘#addBtn‘).unbind(‘click‘).bind(‘click‘ , function(){
if(tableJson.type === ‘‘){
//結果節點為空 可添加 刪除
DecisionTable.prototype.popAddConditionDilog(node);
}
});
}
/**
* 點擊設置結果事件
*/
DecisionTable.bindSetResultButtonEvent = function(node){
$(‘#resBtn‘).unbind(‘click‘).bind(‘click‘ , function(){
DecisionTable.prototype.popUpSetResultDialog(node);
});
}
/**
* 點擊刪除事件
*/
DecisionTable.bindDeleteButtonEvent = function(node){
$(‘#delBtn‘).unbind(‘click‘).bind(‘click‘ , function(){
if(tableJson.type === ‘‘){
//結果節點為空 可調用刪除 方法
DecisionTable.prototype.popUpDeleteDialog(node);
}else{
DecisionTable.prototype.popUpDeleteResultDialog(node);
}
});
}
/**
* 點擊保存事件
*/
DecisionTable.bindSaveButtonEvent = function(node){
$(‘#saveBtn‘).bind(‘click‘,function(){
var aToStr=JSON.stringify(tableJson);//轉換為Json
alert(aToStr);
console.log(aToStr);
});
}
/**
*
* 原型鏈結構
*/
DecisionTable.prototype = {
/**
* 根據已有json遍歷生成Dom
*/
renderData:function(data){
var length=data.condition.length; //獲取數組長度 用於取值
DecisionTable.Js(length);//調用Js通過傳值 返回 2的n次方的計算結果
//渲染thead
var html=‘‘;
html+="<tr>" ;
html+="<th style=‘width:10px;‘ id=‘th‘></th>";
html+="<th style=‘width:180px;‘>條件名稱</th>";
for(var j=0;j<n;j++){
html+="<th style=‘width:20px;‘>"+"規則"+(j+1)+"</th>";
}
html+="</tr>";
//thead內元素添加
$thead.append(html);
for(i=0;i<length;i++){
//渲染 tbody
var html=‘‘;
html+="<tr>" ;
html+=" <td style=‘width:10px;‘><input type=‘checkbox‘ name=‘ckb‘/></td>";
html+=" <td style=‘width:50px;‘><label id=‘cdnName‘>"+data.condition[i].name+"</label></td>";
for(var m=0;m<n;m++){
html+="<td style=‘width:20px;‘>"+data.condition[i].rule[m].value+"</td>"
}
html+="</tr>";
//數據渲染 tbody內元素
$("#tbody tr").eq(i).append(html);
$tbody.append(html);
}
},
/**
* 創建table結構
* rows當前行length
* suptdsum 單元格規則條件判斷
*/
buildTableStyle:function(node,rows,suptdSum){
var html=‘‘;
html+="<tr>" ;
html+="<th style=‘width:10px;‘ id=‘th‘></th>";
html+="<th style=‘width:180px;‘>條件名稱</th>";
for(var i=0;i<n;i++){
html+="<th style=‘width:20px;‘>"+"規則"+(i+1)+"</th>";
}
html+="</tr>";
//thead內元素添加
$thead.append(html);
//if判斷 保留最後一次 生成的元素
if ($("#thead tr").length>1 ){
$("#thead tr").eq(0).remove();
}
//表格的 局部生成
for(var j=0;j<=rows;j++){
if(j==rows){//當前行相等
var html=‘‘;
html+="<tr>" ;
html+=" <td style=‘width:10px;‘><input type=‘checkbox‘ name=‘ckb‘/></td>";
html+=" <td style=‘width:50px;‘><label id=‘cdnName‘>"+tableJson.condition[j].name+"</label></td>";
for(var k=0;k<i;k++){
if(k<suptdSum){//if判斷 單元格值 Y 與N 各占一半
html+="<td style=‘width:20px;‘>"+tableJson.condition[j].rule[k].value+"</td>";
}else{
html+="<td style=‘width:20px;‘>"+tableJson.condition[j].rule[k].value+"</td>";
}
}
html+="</tr>";
//數據渲染 tbody內元素
$tbody.append(html);
}
}
DecisionTable.prototype.buildTableCoplete();//調用方法 生成完成table
},
/**
* 將talbe完整
*/
buildTableCoplete:function(){
var rows=$("#tbody tr").length;//獲取table當前行數
DecisionTable.Js(rows);//計算2的n次方 返回值 n
if(rows === 1){//if判斷 第一次 不需要添加td
return ;
}else{
for(var q=0;q<rows-1;q++){
var html=‘‘;
var arrayCopy=tableJson.condition[q].rule.slice(0);//數組的copy
tableJson.condition[q].rule.push.apply(tableJson.condition[q].rule,arrayCopy);//數組拼接
for(var k=0;k<arrayCopy.length;k++){
//遍歷新數組 取值
html+="<td style=‘width:20px;‘>"+arrayCopy[k].value+"</td>";
}
$("#tbody tr").eq(q).append(html);
}
}
},
/**
* express 條件json 創建
*/
createJson:function(node,rows,tdSum){
for(var j=0;j<n;j++){
if(j<tdSum){
node.condition[rows].rule.push({
value:"Y"
});
}else{
node.condition[rows].rule.push({
value:"N"
});
}
}
},
/**
* result 結果 json 創建
*/
createResultJson:function(node,rows,rowIndex,isBool){
for(var j=0;j<n;j++){
if(isBool){
isBool=true;
}else{
isBool=false;
}
node.result[rowIndex].value.push(isBool);
}
},
//條件添加彈框提示
popAddConditionDilog:function(node){
var buttons = [];
buttons.push(
{name:"確定",callback:function(){
//此處寫擴展代碼
dialog.hide();
var name=$("#conName").val();//條件名稱
var condition=$("#conExpress").val();//條件表達式
var rows=$("#tbody tr").length;//獲取當前tr的length
DecisionTable.Js(rows+1);//返回 值 為2的次方的結果n
var suptdSum=Math.ceil(n/2);//取整需要補充td數量 suptsSum
//將條件，名稱添加到 json數組
tableJson.condition.push({
name:name,//條件名字
condition:condition,//條件表達式
rowindex:rows,//當前行
rule:[
]
});
DecisionTable.prototype.createJson(tableJson,rows,suptdSum);//調用方法創建 完整JSON
//判斷不為空
if(name===‘‘ && condition===‘‘){
DecisionTable.prototype.noNullDialog("名稱和條件表達式不能為空");
}else if(name===‘‘){
DecisionTable.prototype.noNullDialog("請輸入條件名稱");
}else if(condition===‘‘){
DecisionTable.prototype.noNullDialog("請輸入條件表達式");
}else{
//表格結構構建
DecisionTable.prototype.buildTableStyle(tableJson,rows,suptdSum);
}
}
});
var dialog = Dialog({
id:"BaseDialog",
cache:false, //是否緩存，默認為true
title:"彈出框",
width:"400px",
height:"200px",
dialogSize:"", //modal-lg或modal-sm
body:"",
buttons:buttons
});
//可以通過返回的dialog對象調用相關方法
var dialogHtml=‘‘;
dialogHtml += ‘<form class="form-horizontal">‘
dialogHtml+= ‘<div class="form-group">‘
dialogHtml+= ‘<label class="col-sm-3">條件名稱</label>‘
dialogHtml+= ‘<input id="conName" type="text" class="col-sm-8" placeholder="條件1" maxlength="20">‘
dialogHtml+= ‘</div>‘
dialogHtml+= ‘<div class="form-group" style="padding-top:2px;">‘
dialogHtml+= ‘<label class="col-sm-3">條件表達式</label>‘
dialogHtml+= ‘<textarea id="conExpress" class="col-sm-8" type="text" placeholder="a<b+c"></textarea>‘
dialogHtml+= ‘</div>‘
dialogHtml+=‘</form>‘;
dialog.setBody(dialogHtml);
dialog.show();
},
//調用設置結果彈出框
popUpSetResultDialog:function (node){
var buttons = [];
buttons.push(
{
name:"確定",
//回調函數
callback:function(){
dialog.hide();
var name=$("#conName").val();
var condition=$("#conExpress").val();
var ruleLength=$("#tbody tr").last().find("td").length;
var trLength=$("#tbody tr").length;//獲取當前tr的length
var rowIndex=$("#result tbody tr").length;
var cbLeng=$(".cb").length;
//將條件，名稱添加到 json數組
tableJson.type="result";
tableJson.result.push({
name:name,//條件名字
condition:condition,//條件表達式
rowindex:rowIndex,//當前行
value:[
]
});
DecisionTable.prototype.createResultJson(tableJson,ruleLength-2,rowIndex,isBool)
//判斷不為空
if(name===‘‘ && condition===‘‘){
DecisionTable.prototype.noNullDialog("名稱和條件表達式不能為空");
}else if(name===‘‘){
DecisionTable.prototype.noNullDialog("請輸入條件名稱");
}else if(condition===‘‘){
DecisionTable.prototype.noNullDialog("請輸入條件表達式");
}else{
var html=‘‘;
html+="<tr>" ;
html+="<th style=‘width:10px;‘ id=‘th‘></th>";
html+="<th style=‘width:180px;‘>結果名稱</th>";
for(var i=0;i<ruleLength-2;i++){
html+="<th style=‘width:20px;‘>"+"結果"+(i+1)+"</th>";
}
html+="</tr>";
//thead內元素添加
$resThead.append(html);
if ($("#resThead tr").length>1 ){
$("#resThead tr").eq(0).remove();
}
var ahtml
ahtml+="<tbody style=‘background:#ccffff‘>";
ahtml+= "<tr>" ;
ahtml+= "<td style=‘width:10px;‘><input type=‘checkbox‘ name=‘ckb‘ /></td>";
//for(var k=0;k<trLength-1;k++){
ahtml+= "<td style=‘width:10px;‘>"+name+"</td>";
//}
for(var j=0;j<ruleLength-2;j++){
ahtml+= "<td style=‘width:10px;‘><input type=‘checkbox‘name=‘ckb‘ class=‘cb‘/></td>";
}
ahtml+=" </tr></tbody>";
//數據渲染result內元素
$result.append(ahtml);
//checkbox綁定事件 獲取到當前元素Index
$(".cb").click(function(){
isBool=$("input[name=‘ckb‘]").is(‘:checked‘);
var rowindex=$(this).parents().parents().parents().index();//當前行的index
var colLength=$(this).parents().index();//當前列的 總長度
var colIndex=colLength-2;//當前列的 index
tableJson.result[rowindex-1].value[colIndex]=isBool;//改變當前選中的checkbox值 傳入數組
});
}
}
});
var dialog = Dialog({
id:"BaseDialog",
cache:false, //是否緩存，默認為true
title:"彈出框",
width:"400px",
height:"200px",
dialogSize:"", //modal-lg或modal-sm
body:"",
buttons:buttons
});
//可以通過返回的dialog對象調用相關方法
var dialogHtml=‘‘;
dialogHtml += ‘<form class="form-horizontal">‘
dialogHtml+= ‘<div class="form-group">‘
dialogHtml+= ‘<label class="col-sm-3">條件名稱</label>‘
dialogHtml+= ‘<input id="conName" type="text" class="col-sm-8" placeholder="條件1" maxlength="20">‘
dialogHtml+= ‘</div>‘
dialogHtml+= ‘<div class="form-group" style="padding-top:2px;">‘
dialogHtml+= ‘<label class="col-sm-3">條件表達式</label>‘
dialogHtml+= ‘<textarea id="conExpress" class="col-sm-8" type="text" placeholder="a<b+c"></textarea>‘
dialogHtml+= ‘</div>‘
dialogHtml+=‘</form>‘;
dialog.setBody(dialogHtml);
dialog.show();
},
//調用刪除彈出框
popUpDeleteDialog:function (node){
//獲取checkbox 長度
var checkLeng=$("input[name=‘ckb‘]:checked").size();
//獲取未選中的 checkbox長度
var unChecked=$("input[name=‘ckb‘]").not("input[name=‘ckb‘]:checked").parents(‘tr‘);
var unCheckLength=unChecked.length;
//定義數組 tmp用來存放 未選中的數組 數據
var tmpName=[];
for(var j=unCheckLength-1;j>=0;j--){
//將未選中的數據存放 到 新的 數組 tmp
tmpName.push($(unChecked[j]).find("#cdnName").text());
}
//if判斷是否選中 並彈窗提示
if(checkLeng === 0){
this.noNullDialog("選擇刪除的內容");
}else{
var buttons=[];
buttons.push(
{
name:"確定",
//回調函數
callback:function(){
dialog.hide();
var conLenth = tableJson.condition.length;//數組的長度
var sum= conLenth-checkLeng;//未選中的長度
var tdsum= Math.pow(2,conLenth) - Math.pow(2,sum);//計算 需要刪除的 td個數
//for循環 遍歷 從tmp數組取值
for(var i=0;i<sum;i++){
tableJson.condition[i].rule.splice(0,tdsum);//刪除 rule 中的 value所對應的值
tableJson.condition[i].name=tmpName[i]; //tmpName取值 並賦值
tableJson.condition[i].condition=tmpName[i];
}
console.log(tableJson);
tableJson.condition.splice(sum,checkLeng);
$("#tbody").empty();
$("#thead").empty();
//調用renderData方法 重新渲染 tableJson
DecisionTable.prototype.renderData(tableJson);
console.log(tableJson);
}
})
var dialog = Dialog({
id:"BaseDialog",
cache:false,
title:"添加內容",
width:"400px",
hieght:"200px",
dialogsize:"modal-sm",
body:"確定刪除嗎？",
buttons:buttons
});
dialog.show();
}
},
/**
* 結果的刪除
* @param node
*/
popUpDeleteResultDialog:function(node){
//獲取checkbox 長度
var checkLength= $("input[name=‘ckb‘]:checked").size();
//未選中 狀態判斷 並彈窗提示
if(checkLength==0){
this.popUpAddConditionDialog("選擇刪除的內容");//調用彈窗
}else{
var buttons = [];
buttons.push(
{name:"確定",callback:function(){
dialog.hide();
$("input[name=‘ckb‘]:checked").each(function(){//?遍歷選中的checkbox
var n=$(this).parents().parents().parents().index();//?獲取checkbox所在行的順序
var aa=$(this).parents("tr");
//刪除當前行
//if判斷 index為o時 n+1避免誤刪
if(n === 1){
delete tableJson.result[n-1];
$("#result tbody tr").eq(n-1).empty();
tableJson.type=‘‘;
}else{
delete tableJson.result[n-1];
$("#result tbody tr").eq(n-1).empty();
}
});
}}
);
//選中之後 提示 是否確定刪除
var dialog = Dialog({
id:"BaseDialog",
cache:false, //是否緩存，默認為true
title:"提示框",
width:"200px",
height:"60px",
dialogSize:"", //modal-lg或modal-sm
body:"確定刪除？",
buttons:buttons
});
}
},
//調用彈框提示內容不能為空
noNullDialog:function(item){
var dialog = Dialog({
id:"BaseDialog",
cache:false, //是否緩存，默認為true
title:"提示框",
width:"200px",
height:"60px",
dialogSize:"", //modal-lg或modal-sm
body:item
});
}
}
/**
* 2的n次方
* 計算 返回的結果n
*/
DecisionTable.Js=function(num){
n=Math.pow(2,num);
return n;
}
/**
* 主函數
*/
return {
mainInit:function(data){
return new DecisionTable(data);
}
}
});
對了，點擊保存之後前臺將保存成JSON的格式傳給後臺，GIF動圖如下：
gif圖片錄制專用工具GifCam推薦大家使用哦。
js實現決策表