在写这篇文章之前，我首先得感谢我的公司给我的这次学习自己写基于jquery的自定义UI组件，同时也感谢龙哥的影响，写这个UI也是在他老人家的基础上做的
修改，兄弟不才，自己今天刚写了一段自定义UI控件，发现自己越来越喜欢javascript了。
在js代码中需要加入以下代码即可实现。
修改，兄弟不才，自己今天刚写了一段自定义UI控件，发现自己越来越喜欢javascript了。
今天要贡献的这段代码，主要功能就是实现自定义table的列的手动隐藏和显示。小弟菜鸟一只，望各位前辈多多指教。
CustomList = function (zdy_btn, divId, columnList, contentList) {
/// <summary>自定义列表</summary> 需要修改 此方法还需要一个cookie参数
/// <param name="divid" type="string">容器id</param>
var _self = this;
zdy_btn = $(zdy_btn);
divId = $(divId);
//显示和隐藏
zdy_btn.click(function () {
//这里还需要获取默认显示的列
divId.find(".pb-10").remove();
var htm = "";
for (var i = 0; i < columnList.length; i++) {
var check = "";
var around = columnList[i].around||'';//around属性用来解决统计列中合并单元格的问题，具体如图
if (i % 3 == 0) {
htm += "<p class=\"clear_1 pb-10\">";
}
if (columnList[i].check) {
check = "checked=\"checked\"";
}
htm += " <input around="+around+" id=\"" + columnList[i].parallelism + "\" name=\"" + columnList[i].name + "\" type=\"checkbox\" " + check + " value=\"" + columnList[i].parallelism + "\" ><span class=\"fl_l span-1\"><label for=\"" + columnList[i].parallelism + "\">" + columnList[i].name + "</label></span>";
if ((i + 1) % 3 == 0 || i == columnList.length - 1) {
htm += "</p>";
}
}
htm = $(htm);
divId.find("div").prepend(htm);
htm.jqTransform();
divId.toggle(500);
});
//确定和取消
divId.find("p a").click(function () {
var html = $(this).find("span").html();
if (html != null) {
if (html == "确定") {
//需要获取选中的列 重新赋值
var $jdzxck = divId.find("input");//所有checkbox的集合
var $tableTop = $(".ice-table-head").find(".table").find("th");//表头
var $tableMain = $(".ice-table-body").find(".table").find("tr");//表格中的所有行
var $table_merger=$tableMain.find("table");//检查是否有合并表格
if($table_merger.length==0){//没有合并单元的解决方案
for (var i = 0; i < $jdzxck.length; i++) {
if ($jdzxck.eq(i).attr("checked") == "checked") {
$tableTop.eq(i).show();//显示表头
for (var k = 0; k < $tableMain.length; k++) {
$tableMain.eq(k).find("td").eq(i).show();
}
}else{
$tableTop.eq(i).hide();
for (var k = 0; k < $tableMain.length; k++) {
$tableMain.eq(k).find("td").eq(i).hide();
}
}
}
var $tableMain_1 = $(".ice-table-body").find(".table");
var $tableTop_1 = $(".ice-table-head").find(".table");
FixTableWidth($tableTop_1, $tableMain_1);//纠正表格
}else{//有合并单元的解决方案
var tjcos=$("#colspan").val()||"";//(这个是统计列前面的列的colspan属性值)，(具体定义在相对应的页面)
for (var i = 0; i < $jdzxck.length; i++) {
if ($jdzxck.eq(i).attr("checked") == "checked") {
var name = $jdzxck.eq(i).val();
$('[name="'+name+'"]').show();
var around = $jdzxck.eq(i).attr("around")
if(around=="z"){//当前隐藏的是合并列，不显示
$('[name=tongji]').show();//这个是统计列
}
}else{
var name = $jdzxck.eq(i).val();
$('[name="'+name+'"]').hide();
var around = $jdzxck.eq(i).attr("around")
if(around=="z"){//当前隐藏的是合并列，不显示
$('[name=tongji]').hide();
}
if(around=="p"){//显示列(统计列的前面)
tjcos=tjcos-1;
}
}
}
$('[name=tongjicos]').attr("colspan",tjcos);
}
var $tableMain_1 = $(".ice-table-body").find(".table");
var $tableTop_1 = $(".ice-table-head").find(".table");
FixTableIntoTableWidth($tableTop_1, $tableMain_1);//纠正表格
}
//最后隐藏divId
divId.hide(500);
}
});
}//纠正表格宽度
FixTableWidth = function ($tableTop, $tableMain) {
// alert($tableMain.html());
for (var j = 0; j < $tableTop.length; j++) {
var $th = $tableTop.eq(j).find("th");
var $td = $tableMain.eq(j).find("td");
var tdCount = $tableMain.eq(j).find("tr").eq(0).find("td").length;
for (var i = 0; i < tdCount ; i++) {
var widthh = $th.eq(i).css("width");
$td.eq(i).css("width", widthh);
}
}
}
//纠正表格嵌套的宽度对齐问题
FixTableIntoTableWidth = function ($tableTop, $tableMain) {
for (var j = 0; j < $tableTop.length; j++) {
var $th = $tableTop.eq(j).find("th");
var $td = $tableMain.eq(j).find("td[name]");
var tdCount = $tableMain.eq(j).find("tr").eq(0).find("td[name]").length;
for (var i = 0; i < tdCount ; i++) {
var widthh = $th.eq(i).css("width");
$td.eq(i).css("width", widthh);
}
}
}<div class="jd-zx-ck f-14" style="display:none;" id="zdy_div">
<img src="../../styles/img/icons/ups_jt.gif" class="jd-ck-jt">
<div class="jd-ck" style="overflow: visible;">
<p class="clear_1">
<a class="win-subbtn f-14 f-white fl_r ml-10"><span class="win-btn-ls fl_l">取消</span><span
class="win-btn-rs fl_l"></span></a>
<a class="win-subbtn f-14 f-white fl_r ml-10"><span class="win-btn-ls fl_l">确定</span><span
class="win-btn-rs fl_l"></span></a>
<span class="fl_r f-14 f-blue">筛选想要的收入信息</span>
</p>
</div>
</div><a id="zdy_btn" class="ico-1 ln-6 ml-20" href="javascript:;">自定义列</a>在js代码中需要加入以下代码即可实现。
//定义一个表头list,around属性表示某一列在统计列的哪一面,p表示前面,b表示后面,z表示和当前统计行为一列此处
var headlist = [{ id: '1', name: '序号', parallelism: 'iceUiRowNumber', check: true,around:'p'},
{ id: '2', name: '时间', parallelism: 'happenTime', check: true ,around:'p'},
{ id: '3', name: '类型', parallelism: 'accountActionType', check: true ,around:'p'},
{ id: '4', name: '姓名', parallelism: 'studentName', check: true ,around:'p'},
{ id: '5', name: '年级', parallelism: 'studentGradeName', check: true ,around:'p'},
/*{ id: '6', name: '收费内容', parallelism: 'studentClassName', check: true,around:'b'},*/
{ id: '7', name: '学费(元)', parallelism: 'studentClassShiShouMoney', check: true,around:'b'},
{ id: '8', name: '折扣', parallelism: 'studentClassRate', check: true,around:'b'},
{ id: '9', name: '物品费(元)', parallelism: 'bookShiShouMoney', check: true,around:'b'},
{ id: '10', name: '应收(元)', parallelism: 'shouldMoney', check: true ,around:'p'},
{ id: '11', name: '实收(元)', parallelism: 'trueMoney', check: true ,around:'z'},
{ id: '12', name: '说明', parallelism: 'yhReasons', check: true ,around:'b'},
{ id: '13', name: '支付类型', parallelism: 'pay', check: true,around:'b'},
{ id: '14', name: '收款人', parallelism: 'acceptMoneyPerson', check: true,around:'b'},
{ id: '15', name: '支付方式', parallelism: 'paymentType', check: true,around:'b'}
];
new CustomList("#zdy_btn", "#zdy_div", headlist, list);//自定义按钮有关后期的改进尽情期待。。。如有疑问请留言。欢迎各位多多指教，大家共同学习
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
