原生js封装table组件

使用原生js封装自己的table组件。

思路是通过设置参数，生成对应的表格dom;

源码如下：（初步实现）

var XUi = {// table组件tableDom:{common:function(param){var options = {columns: [],dataSource: [],width: '80%',}if (param && {}.toString.call(param) === '[object Object]') {for (let attr in param) {options[attr] = param[attr]}}// 参数格式校验if(!Array.isArray(options.columns)) {console.log('错误：传入columns必须为数组');} else {for(let i = 0; i < options.columns.length; i++) {for(let j = i + 1; j < options.columns.length; j++) {if(!options.columns[i].key) {console.log('key不存在')break;} else {if(options.columns[i].key === options.columns[j].key) {console.log('key重复')break;}}}}}if(!Array.isArray(options.dataSource)) {console.log('错误：传入dataSource必须为数组');}if(options === null || typeof options !== "object") {console.log('错误：参数必须为对象');}// 赋值this.columns = options.columns;this.dataSource = options.dataSource;this.width = options.width;this.init();},// 初始化init:function(){this.createElement();},// 创建节点createElement:function(){// tablevar table = document.createElement('table');table.className = 'xui_table'table.width = '500px';table.border = '0'table.cellPadding = '0'table.cellSpacing = '0'// theadvar table_head = this.createHead();// tbodyvar table_body = this.createBody();// 向table中添加thead和tbodytable.appendChild(table_head);table.appendChild(table_body);// 向body中插入tabledocument.body.appendChild(table);},// 创建theadcreateHead:function(){let { columns } = this;let thead_th = null;// 创建theadvar thead = document.createElement('thead');thead.setAttribute('style','background: #e3e3e3');// 创建trvar thead_tr = document.createElement('tr');// 遍历创建th，向th中添加内容for(var i=0;i<columns.length;i++){thead_th = document.createElement('th');thead_th.innerHTML = columns[i].title;thead_tr.appendChild(thead_th)}// 向thead中添加tr节点thead.appendChild(thead_tr);// 返回theadreturn thead},// 创建tbodycreateBody:function(){let { dataSource, columns } = this;let tbody_tr = null;let   tbody_td = null;// 创建tbodyvar tbody = document.createElement('tbody')// 遍历tr/td,向tbody中添加内容for(var i=0;i<dataSource.length;i++){// 创建trtbody_tr = document.createElement('tr');for(var j=0;j<columns.length;j++){// 创建tdtbody_td = document.createElement('td');tbody_td.setAttribute('style','text-align:'+columns[j].align)// 传入的render是函数if(columns[j].render && typeof columns[j].render === "function") {// 执行render函数，传入行值和列值，并且获得返回值let render = columns[j].render(dataSource[i][columns[j].dataIndex], dataSource[i]);// 如果返回值是一个dom节点，则向td里插入节点if(typeof render === "object") {tbody_td.classList.add('toolBtn')tbody_td.appendChild(render);} else {// 否则直接innerHTMLtbody_td.innerHTML = render;}} else {// 没有传render时，直接插入对应值tbody_td.innerHTML = dataSource[i][columns[j].dataIndex] || ''}// 向tr中插入tdtbody_tr.appendChild(tbody_td);// 向tbody中插入trtbody.appendChild(tbody_tr);}}return tbody},createTool:function(arry,data,cb){let func = function(){ }if (cb && {}.toString.call(cb) === '[object Function]') {func = cb}var len = arry.length;var btns = document.createElement('div');for(var i=0;i<len;i++){let element = document.createElement('a');element.innerHTML = arry[i].text;element.type = arry[i].type;var type = arry[i].type;element.onclick = function(e){// 回调函数：data点击行数据，type点击事件的执行类型：删除、修改....func(data,e.target.type)}btns.appendChild(element)}return btns;},},
}

设置css样式：

/* table表格 */
table.xui_table{border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
table.xui_table tr{line-height: 39px;}
table.xui_table td{border-left: 1px solid #ddd;border-top: 1px solid #ddd;text-align: center;}
table.xui_table th{border-left: 1px solid #ddd;border-top: 1px solid #ddd;text-align: center;}
table.xui_table td.toolBtn{}

html具体使用方法如下：

<script type="text/javascript">// table表格const columns = [{key: 'name',title: '姓名', dataIndex: 'name',align: 'center',}, {key: 'age',title: '年龄',dataIndex: 'age',align: 'center',}, {key: 'job',title: '职位',dataIndex: 'job',align: 'center',}, {key: 'action',title: '操作',align: 'center',toolbar: '#barDemo',render: (text, data) => {return XUi.tableDom.createTool([{type:'del',text:'删除',},{type:'edit',text:'修改',},{type:'look',text:'查看',}],data,function(e,type){// e:点击行数据// type:点击事件执行类型--删除、修改if(type == 'del'){console.log('删除数据：')console.log(e)}else if(type == 'edit'){console.log('修改数据：')console.log(e)}})}},];const dataSource = [{name: '张三', age: '20', job: '经理'}, {name: '李四',age: '21', job: '总监'}, {name: '周五',age: '22', job: '实习生'}, {name: '郑六',age: '23', job: '职员'},]XUi.tableDom.common({columns, dataSource})</script>

自定义table组件，完善版已重新发布了一篇文章

地址：https://blog.csdn.net/qq_42832151/article/details/129856360

原生js封装table组件相关推荐

原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
原生JS封装分页器组件
应用样式: 分页器组件: <template><div id="pagination"><div class="el-row"&g ...
js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
H5移动端原生JS封装附件上传服务器
本文主要通过原生的js封装附件上传upload.js.可成功内嵌钉钉,ios和安卓端可正常使用,支持单个.多个附件上传. 一.业务需求封装原生JS附件上传,动态创建附件列表,可对附件列表进行删除和新 ...
animate用法 js原生_原生JS封装animate运动框架的实例
如下所示: div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 5 ...
原生js封装cookie插件
最近迷上了react,用react模拟之前的系统,做登录的时候,发现需要用到cookie,之前用的跟vue搭配的VueCookie,我就在想啊,react应该也会有相应的cookie插件吧!百度一下, ...
原生js封装十字参考线插件(一)
需求来源: 拓扑图之机房平面图,显示机房长宽比例尺,房间内标注各种设备间距不易实现,特在机房平面图上层加一个十字参考线横竖两条线垂直,在鼠标指针处交叉,显示鼠标指针坐标(相对机房平面图的坐标,不是相 ...

原生js封装table组件

原生js封装table组件相关推荐

最新文章

热门文章