databales工作总结
Posted baojiao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了databales工作总结相关的知识，希望对你有一定的参考价值。
近期在工作中用到了databales,现在总结一下在工作中遇到的问题以及解决方法，如有不妥之处希望多多指教，定会改进。
首先这里用的是coloradmin框架，在vs环境下开发。
这里写一个容器用于放值table：
<div class="col-lg-12" id="dataTableDiv"> </div>
这里是table,在运行时将会动态填充到dataTableDiv中，其中dataTbody将存放数据：
<script id="TableTemplate" type="text/x-jquery-tmpl">
<table class="table" id="dataTable">
<thead>
<tr style="height:30px;">
<th width="70">序号</th>
<th width="100">类型</th>
<th width="100">标准编号</th>
<th width="100">等级</th>
<th>来源</th>
<th width="100" class="report-check">报表选项</th>
<th width="130">报警对象</th>
<th width="90">标准值</th>
<th width="90">报警值</th>
<th width="120">深度(m)</th>
<th width="100">对策</th>
<th>备注</th>
</tr>
</thead>
<tbody id="dataTbody"></tbody>
</table>
</script>
这里定义一个行模板，根据数据中对象的字段名来取值，其中checkbox在框架中遇到一些问题，下面会细说：
<script id="TrTemplate" type="text/x-jquery-tmpl">
<tr style="text-align:left;">
<td>${xuhao}</td>
<td>${Type}</td>
<td>${Code}</td>
<td>
{{if Level==3}}
<span style="color:red;">高风险</span>
{{else Level==2}}
<span style="color:orange;">中风险</span>
{{else Level==1}}
<span style="color:yellow;">低风险</span>
{{else}}
<span style="color:green;">安全</span>
{{/if}}
<input type="hidden" value="${ID}" id="${ID}" />
</td>
<td>${RiskSource}</td>
<td style="padding-left:30px;" class="report-check">
<div class="col-md-2 col-lg-2 checkbox checkbox-css">
<input type="checkbox" value="" id="check${ID}" onclick="choose(${ID})" />
<label for="check${ID}"></label>
</div>
</td>
<td>${WarnObject}</td>
<td>${StandardValue}</td>
<td>${WarnValue}</td>
<td>
{{if Depth!=null}}
${Depth/1000}
{{/if}}
</td>
<td></td>
<td>${Note}</td>
</tr>
</script>
这里页面加载时执行这个方法，拿到数据：
function GetPitRiskList(date) {
//页面编辑提交按钮 $(".edit-submit span:first-child").css("color","rgb(204, 204, 204)"); $(".edit-submit").hide(); //获取报表日期 $("#fengxianDate").html(date); $.ajax({ url: ‘****************‘, type: ‘***‘, dataType: ‘***‘, data: { ************ }, cache: false, success: function (data, textStatus, xhr) {var i = 1; var level1 = 0; var level2 = 0; var level3 = 0; for (var o in data) { data[o].xuhao = i++; if (data[o].Level == 3) { level3++; } else if (data[o].Level == 2) { level2++; } else if (data[o].Level == 1) { level1++; } } DestroyDataTable("#dataTable"); $("#dataTableDiv").empty(); $("#TableTemplate").tmpl().appendTo("#dataTableDiv"); $("#TrTemplate").tmpl(data).appendTo("#dataTbody"); //CreateDataTable("#dataTable"); $("#dataTable").dataTable({ "language": { "url": "/Scripts/Chinese.txt" }, "bJQueryUI": true, "sPaginationType": "full_numbers", "aoColumnDefs": [ { "aTargets": [5], "bVisible": false }] }); $("#Level1Btn").html("低风险" + level1); $("#Level2Btn").html("中风险" + level2); $("#Level3Btn").html("高风险" + level3); allPitRiskList = data; $("#LevelDiv button").removeClass("btn-border-radius"); $("#ShowAllLevel").addClass("btn-border-radius"); // data: 高风险data var categoriesArr = new Array(); for (var o in data) { if ($.inArray(data[o].Type, categoriesArr) == -1) { categoriesArr.push(data[o].Type); } } var Level1Arr = new Array(); var Level2Arr = new Array(); var Level3Arr = new Array(); for (var i = 0; i < categoriesArr.length; i++) { Level1Arr.push(0); Level2Arr.push(0); Level3Arr.push(0); } for (var o in data) { var xiabiao = $.inArray(data[o].Type, categoriesArr); if (xiabiao >= 0) { if (data[o].Level == 3) { Level3Arr[xiabiao]++; } else if (data[o].Level == 2) { Level2Arr[xiabiao]++; } else if (data[o].Level == 1) { Level1Arr[xiabiao]++; } } } drawChart(categoriesArr, Level1Arr, Level2Arr, Level3Arr); // $("#selListDiv").click(); }, error: function (xhr, textStatus, errorThrown) { //called when there is an error } }); }
好了，接下来要重点说工作中遇到的问题了。
首先是复选框，
默认的复选框在这里是这样的
，而现在需求是这样的
，所以就对复选框 的样式进行调整：
.checkbox.checkbox-css label:before { width: 10px !important; height: 10px !important; border-radius: 0px !important; border: 1px solid #fff !important; cursor: pointer; } .checkbox.checkbox-css input:checked + label:before { background: none !important; border: none !important; border-color: none !important; }
然后是使用选择中取消和取值时，由于使用了伪类再加上框架对checkbox已经定义过，所以在使用过程中点击选择样式上达到了效果，却不能在判断:checked=true，正个过程中无论dom取值，还是jquery:checked=true判断，还是在databales中data判断都始终时false,
当点击时方法中传一个id，然后循环table,当id相等时，将input标签的value=""替换成‘value="" checked="checked"‘，当然取消选中就是将 ‘value="" checked="checked"‘替换成value="",由于我们是多模块取值，所以我定义了一个全局变量，在选中的同时添加或删除值，
这里只说一下删除值，dataList.splice(i,1);意思是删除下标为i的一项。上代码：
function choose(id){ $("#dataTable").DataTable().rows().data().each(function (data, index, rows) {//循环tabale（不是一页的数据，而是全部数据） var RiskID=$(data[3])[2].value; if(RiskID==id){ if($(data[5]).find("input")[0].checked==true){ data[5] = data[5].replace(‘checked="checked"‘,‘‘); $("#dataTable").DataTable().row(index).data(data); for (var i=0;i<DataList.length;i++){ if (DataList[i].RiskID==RiskID){ DataList.splice(i,1); } } }else{ data[5] = data[5].replace(‘value=""‘, ‘value="" checked="checked"‘); $("#dataTable").DataTable().row(index).data(data);//将行取出改变后再赋进去 } if($(data[5]).find("input")[0].checked==true){//如果是选中而不是取消就拿值 var obj={ "RiskID":$(data[3])[2].value, "ModleType":data[1], "StandardCode":data[2], "RiskLevel":$(data[3])[0].innerText, "RiskSource":data[4], "WarnObject":data[6], "StandardValue":data[7], "WarnValue":data[8], "DigDepthValue":data[9], }; DataList.push(obj); } } }); }
最后一个就是databales列隐藏显示的问题，隐藏有两种方式：
一种是初始化时候：
$("#dataTable").dataTable({ "language": { "url": "/Scripts/Chinese.txt" }, "bJQueryUI": true, "sPaginationType": "full_numbers", "aoColumnDefs": [ { "aTargets": [5],//目标列 "bVisible": false//是否隐藏，false隐藏 }] });
另一种就是：
$("#dataTable").dataTable().fnSetColumnVis(5, false,false );
其中5代表目标列，第一个false是隐藏，第二个是不重绘表格，如果为true则会出现重复数据覆盖数据问题，具体为什么会这样未知，
到此在工作中对datatables使用过程中遇到的问题就没了，以后在使用过程中遇到会再次进行补充。
以上是关于databales工作总结的主要内容，如果未能解决你的问题，请参考以下文章