1.  var msCtools = {

2.       conf: {

3.        host: "", 

4.        port: "80",

5.        baseapi: "/api/",

6.        basepath: "mhc/",

7.       },

8.       Table:{

9.        init:function(param,id){

10.          var options = {

11.             columns: [], // 表格列内容设置（key:字段名，title：表头名，align：对齐方式，width：列宽度，textOver：超出行溢出，ishidden：是否隐藏(true:是，false:否)默认false）

12.             dataSource: [], // 数据

13.             width: '100%', // 宽度，默认100%

14.             ischeck:false, // 是否勾选(true:是，false:否)，默认false

15.             style:{

16.                 skin:'', // 边框样式：line线/row行/none无

17.                 even:false, // 是否开启隔行背景(true:是，false:否)，默认false

18.                 evenColor:['#fff','#EEF0F2'], // 隔行背景颜色设置

19.             },

20.             colClassName:'',

21.          }

22.          if (param && {}.toString.call(param) === '[object Object]') {

23.             for (let attr in param) {

24.                options[attr] = param[attr]

25.             }

26.          }

27.          // 参数格式校验：columns必须为数组且key不重复，dataSource必须为数组

28.          if(!Array.isArray(options.columns)) {

29.             console.log('错误：传入columns必须为数组');

30.          } else {

31.             for(let i = 0; i < options.columns.length; i++) {

32.                 for(let j = i + 1; j < options.columns.length; j++) {

33.                    if(!options.columns[i].key) {

34.                        console.log('key不存在')

35.                        break;

36.                    } else {

37.                        if(options.columns[i].key === options.columns[j].key) {

38.                           console.log('key重复')

39.                           break;

40.                        }

41.                    }

42.                 }

43.             }

44.          }

45.          if(!Array.isArray(options.dataSource)) {

46.             console.log('错误：传入dataSource必须为数组');

47.          }

48.          if(options.style === null || typeof options.style !== "object") {

49.             console.log('错误：style参数必须为对象');

50.          }

51.          if(options === null || typeof options !== "object") {

52.             console.log('错误：参数必须为对象');

53.          }

54.          // 赋值

55.          this.cols = options.columns;

56.          this.data = options.dataSource;

57.          this.width = options.width;

58.          this.ischeck = options.ischeck;

59.          this.style = options.style;

60.          this.colClassName = options.colClassName;

61.          this.id = id;

62.          this.content = document.getElementById(id);

63.          // 创建dom节点

64.          this.creatDom();

65.      },

66.      // 创建节点

67.      creatDom:function(){

68.          var table = document.createElement('table');

69.             table.className = 'table_style';

70.          // 表格边框的宽度

71.          table.setAttribute('border','0');

72.          // 单元格之间的空白

73.          table.setAttribute('cellspacing','0');

74.          // 单元边沿与其内容之间的空白

75.          table.setAttribute('cellpadding','10px');

76.         

77.          // table边框样式：line线/row行/none无

78.          if(this.style.skin == 'line'){

79.             // 外侧边框的哪个部分是可见的

80.             table.setAttribute('frame','box');

81.             // 内侧边框的哪个部分是可见的

82.             table.setAttribute('rules','all');

83.          }else if(this.style.skin == 'row'){

84.             // 外侧边框的哪个部分是可见的

85.             table.setAttribute('frame','box');

86.             // 内侧边框的哪个部分是可见的

87.             table.setAttribute('rules','rows');

88.          }else if(this.style.skin == 'none'){

89.             // 无边框

90.          }

91.         

92.          // 设置宽

93.          table.setAttribute('width',this.width);

94.         

95.          var thead = this.creatThead();

96.          var tbody = this.creatTbody();

97.          table.appendChild(thead);

98.          table.appendChild(tbody);

99.          this.content.appendChild(table);

100.            },

101.            // 创建thead

102.            creatThead:function(){

103.               var thead = document.createElement('thead');

104.               var tr = document.createElement('tr');

105.                   tr.className = 'table_cols';

106.                   tr.classList.add(this.colClassName);

107.               // 是否勾选ischeck( true / false )

108.               if(this.ischeck){

109.                   var th = document.createElement('th');

110.                      th.id = 'ischeck_th';

111.                      th.className = 'ischeck_inp'

112.                   var input = document.createElement('input');

113.                      input.type = 'checkbox';

114.                      input.setAttribute('style','vertical-align: middle;');

115.                      var content = this.content;

116.                      input.onchange = function(e){

117.                          if(e.target.checked){

118.                             // 选中全选

119.                             console.log('触发选中全选');

120.                             msCtools.Table.allCheck(content,true);

121.                          }else{

122.                             // 取消全选

123.                             console.log('触发取消全选');

124.                             msCtools.Table.allCheck(content,false);

125.                          }

126.                      }

127.                   var span = document.createElement('span');

128.                      span.id = 'ischeck_title';

129.                      span.innerText = '全选';

130.                   th.appendChild(input);

131.                   th.appendChild(span);

132.                   tr.appendChild(th);

133.               }

134.               var lenn = this.cols.length;

135.               for(var i=0;i<lenn;i++){

136.                   // 非隐藏

137.                   if( !this.cols[i].ishidden){

138.                      var th = document.createElement('th');

139.                          th.innerText = this.cols[i].title;

140.                      tr.appendChild(th);

141.                   }

142.               }

143.               thead.appendChild(tr);

144.               return thead;

145.            },

146.            // 创建tbody

147.            creatTbody:function(){

148.               var tbody = document.createElement('tbody');

149.               var lenn = this.data.length;

150.               for(var i=0;i<lenn;i++){

151.                   var tr = document.createElement('tr');

152.                   // 是否开启隔行背景

153.                   if(this.style.even){

154.                      if(this.style.evenColor){

155.                          if(this.style.evenColor.length > 1){

156.                             var result = i % 2 == 0 ? this.style.evenColor[0] : this.style.evenColor[1];

157.                          }else{

158.                             var result = i % 2 == 0 ? '#ffffff' : '#e4e0e0';

159.                          }

160.                      }else{

161.                          var result = i % 2 == 0 ? '#ffffff' : '#e4e0e0';

162.                      }

163.                      tr.setAttribute('style','background-color:'+result)

164.                   }

165.                   // 是否勾选ischeck

166.                   if(this.ischeck){

167.                      var td = document.createElement('td');

168.                          td.className = 'ischeck_inp'

169.                      var input = document.createElement('input');

170.                          input.type = 'checkbox';

171.                          input.setAttribute('style','vertical-align: middle;');

172.                          input.setAttribute('set-data',this.data[i].id);

173.                          // var set_data1 = JSON.stringify(this.data[i]);

174.                          // input.setAttribute('set-data1',set_data1);

175.                          input.onchange = function(e){

176.                             if(e.target.checked){

177.                                 // console.log('触发选中')

178.                             }else{

179.                                 // console.log('触发取消')

180.                             }

181.                          }

182.                      td.appendChild(input);

183.                      tr.appendChild(td);

184.                   }

185.                   var lenn_cols = this.cols.length;

186.                   for(var f=0;f<lenn_cols;f++){

187.                      // 非隐藏

188.                      if( !this.cols[f].ishidden){

189.                          var td = document.createElement('td');

190.                          var span = document.createElement('span');

191.                          if(this.cols[f].render && typeof this.cols[f].render === 'function'){

192.                             // 执行render函数，传入行值和列值，并且获得返回值

193.                             let render = this.cols[f].render(this.data[i][this.cols[f].key], this.data[i]);

194.                             // 如果返回值是一个dom节点，则向td里插入节点

195.                             if(typeof render === "object") {

196.                                 td.classList.add('toolBtn')

197.                                 td.appendChild(render);

198.                             } else {

199.                                 // 否则直接innerHTML

200.                                 span.innerHTML = render;

201.                             }

202.                          }else{

203.                             // 直接插入对应值

204.                             span.innerText = this.data[i][this.cols[f].key];

205.                          }

206.                          var td_style = '';

207.                          // 设置对齐方式

208.                          if(this.cols[f].align){

209.                             td_style += 'text-align:'+this.cols[f].align+';';

210.                          }

211.                          // 设置列宽

212.                          if(this.cols[f].width){

213.                             td_style += 'width:'+this.cols[f].width+';';

214.                          }

215.                          // 设置满行溢出

216.                          var textOver = 1;

217.                          if(this.cols[f].textOver){

218.                             textOver = this.cols[f].textOver;

219.                          }

220.                          span.setAttribute('style','overflow : hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: '+textOver+'; -webkit-box-orient: vertical;')

221.                          td.setAttribute('style',td_style);

222.                          td.appendChild(span);   

223.                          tr.appendChild(td); 

224.                      }

225.                   }

226.                   tbody.appendChild(tr);

227.               }

228.               return tbody;

229.            },

230.            // 数据操作

231.            tools:function(arry,data,cb){

232.               let func = function(){};

233.               if (cb && {}.toString.call(cb) === '[object Function]') {

234.                   func = cb

235.               }

236.               var lenn = arry.length;

237.               var btns = document.createElement('div');

238.                   btns.classList.add('tooldivBtn');

239.               for(var i=0;i<lenn;i++){

240.                   // 事件类型：type，文字：text，样式：classname

241.                   let element = document.createElement('a');

242.                   element.innerHTML = arry[i].text;

243.                   element.type = arry[i].type;

244.                   element.className = arry[i].classname;

245.                   var type = arry[i].type;

246.                   element.onclick = function(e){

247.                      // 回调函数：data点击行数据，type点击事件的执行类型：删除、修改....

248.                      func(data,e.target.type)

249.                   }

250.                   btns.appendChild(element)

251.               }

252.               return btns;

253.            },

254.            // 获取选中数据

255.            getchecked:function(id){

256.               var content = document.getElementById(id);

257.               var table = content.queryselector('table');

258.               var tbody = table.queryselector('tbody');

259.               var node_checks = tbody.queryselectorAll('.ischeck_inp');

260.               var data = [];

261.               for(var i=0;i<node_checks.length;i++){

262.                   var item = node_checks[i];

263.                   var input = item.queryselector('input[type="checkbox"]');

264.                   if(input.checked){

265.                      // var itm = input.getAttribute('set-data1');

266.                      //  itm = JSON.parse(itm);

267.                      var itm = input.getAttribute('set-data');

268.                      data.push(itm);

269.                   }

270.               }

271.               return data

272.            },

273.            // 全选/取消

274.            allCheck:function(content,ischeck){

275.               var table = content.queryselector('table');

276.               var tbody = table.queryselector('tbody');

277.               var node_checks = tbody.queryselectorAll('.ischeck_inp');

278.               for(var i=0;i<node_checks.length;i++){

279.                   var item = node_checks[i];

280.                   var input = item.queryselector('input[type="checkbox"]');

281.                      input.checked = ischeck;

282.               }

283.            }

284.       },

285.       }

1.  /* table 默认样式 */

2.  .table_style{border-color: #e4e0e0;padding: 0;margin: 0;}

3.  .table_style tbody td{color: #666666;font-size: 14px;}

4.  .table_cols{background-color:#EEF0F2;color: #333;text-align: center;line-height: 40px;}

5.  .table_cols th{padding: 0 15px;font-size: 14px;color: #333;font-weight: normal;}

6.  .ischeck_inp{padding-left: 15px;min-width: 50px;}

7.  .table_style .toolBtn a{padding: 3px 10px;border: 1px solid #999;border-radius: 4px;margin-right: 10px;cursor: pointer;}

1.  <!DOCTYPE html>

2.  <html>

3.       <head>

4.        <meta charset="utf-8">

5.        <title>测试实例</title>

6.        <style type="text/css">

7.            /* table 自定义 */

8.            .zdy_cols{

9.               background-color:#01AAED;

10.             color: #fff;

11.             text-align: center;

12.             line-height: 60px;

13.          }

14.          .zdy_cols th{padding: 0 25px;font-size: 14px;font-weight: normal;}

15.      </style>

16.      <script src="msCtools.js"></script>

17.     </head>

18.     <body>

19.      <div id="ctools_table"></div>

20.      <button onclick="getdata()">获取数据</button>

21.     </body>

22.     <script>

23.     var data = [

24.          {id:'001', name:'还是等会计法恒生科技粉红色快递费数据库',age:12,job:'尽快尽快'},

25.          {id:'002', name:'lili',age:12,job:'鼎折覆餗老看到集福卡了束带结发SDK福建省看到了附加速度快的说法可接受的开发收到了的看法是打开房间塞德里克肯德基首付款'},

26.          {id:'003', name:'lili',age:12,job:'尽快尽快'}

27.     ]

28.     msCtools.Table.init({

29.      columns:[

30.          {key: 'id',title: 'id', align: 'center',width:'60px'},

31.          {key: 'name',title: '姓名', align: 'center',width:'60px'},

32.          {key: 'age',title: '年龄',align: 'center',width:'60px'},

33.          {key: 'job',title: '工作',align: 'center',

34.                 render:function (text, data){

35.                    return '<span style="color:green;">'+text+'</span>'

36.                 }

37.          },

38.          {key: 'tools',title: '操作',align: 'center',width:'200px',

39.                 render:function (text, data){

40.                    return msCtools.Table.tools([{

41.                           type:'del',

42.                           text:'删除',

43.                           classname:' toolBtn delBtn'

44.                        },{

45.                           type:'edit',

46.                           text:'修改',

47.                           classname:'toolBtn editBtn'

48.                        },{

49.                           type:'look',

50.                           text:'查看',

51.                           classname:'toolBtn lookBtn'

52.                        }],data,function(e,type){

53.                           // e:点击行数据

54.                           // type:点击事件执行类型--删除、修改、查看

55.                           if(type == 'del'){

56.                               console.log('删除数据：')

57.                               console.log(e)

58.                           }else if(type == 'edit'){

59.                               console.log('修改数据：')

60.                               console.log(e)

61.                           }else if(type == 'look'){

62.                               console.log('查看数据：')

63.                               console.log(e)

64.                           }

65.                        })

66.                 }

67.          },

68.      ],

69.      dataSource:data,

70.      width:'800px', // 宽度

71.      ischeck:true, // 是否勾选

72.        colClassName:'zdy_cols'

73.     },'ctools_table');

74.     

75.     function getdata(){

76.      var data = msCtools.Table.getchecked('ctools_table');

77.      console.log(data);

78.     }

79.     </script>

80.</html>