您好,登錄后才能下訂單哦!
這篇文章主要介紹layui中table表格如何實(shí)現(xiàn)新增,修改,刪除,查詢,雙擊獲取行數(shù)據(jù)方式,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
layui table利用參數(shù)新增,修改,刪除,查詢,雙擊數(shù)據(jù)行獲取本行數(shù)據(jù)等。模塊化使用layui table表格,通過(guò)二次封裝實(shí)現(xiàn)語(yǔ)法上的解耦使用layui table,使用參數(shù)就可以以及外部的方法調(diào)用即可實(shí)現(xiàn)對(duì)layui table表格的操作,通過(guò)封裝,把更多自主權(quán)交給頁(yè)面自定義,layui:v:2.3.0。
演示效果如下:
以上json顯示不完整是錄屏的原因,請(qǐng)見(jiàn)諒!
var Table = function(ops){ this.dataList = []; this.table = {}; this.tid = ops.id; } Table.prototype = { getRowItemById: function (id) { var _item = null; var list = this.dataList for (var i = 0; i < list.length; i++) { var item = list[i]; item.id == id ? _item = item : '' break; } return _item; }, deleteRowItem: function (id) { var list = this.dataList; for (var i = list.length - 1; i >= 0; i--) { if (list[i].id == id) { list.splice(i, 1); } } this.reloadTable(); }, updateRowItem: function (item,key,callback) { var id = item[key]; //item:ajax獲取的json; key:用于自定義標(biāo)示數(shù)據(jù)行的flag,唯一; var idkey = this.idkey; var tid = this.tid; var arr = this.dataList; for(var ii =0;ii<arr.length;ii++){ var _arr = arr[ii]; var index = ii; if(_arr[idkey] == id){ arr[index] = item; var $div = $("#"+tid).next() var $tr = $div.find('.layui-table-body table.layui-table').find('tr').eq(index); var $tds = $tr.find('td'); for(var i =0;i<$tds.length;i++){ var $td = $tds.eq(i); var $field = $td.attr('data-field'); var $itemValue = item[$field]; var $tdValue = $td.find('div').html(); if($itemValue!=$tdValue){ $td.find('div').html($itemValue); } } continue; } } if (callback) { callback(item) } }, dbClickTableItem: function (callback) { }, addRowItem: function (item) { var list = this.dataList; list.unshift(item); this.reloadTable(); }, reloadTable: function (callback) { var list = this.dataList; this.table.reload(this.tid, { data: list }); }, clearTable: function () { this.dataList = []; this.reloadTable(); }, rederTable: function (ops, callback) { this.table.render(ops); typeof callback == 'function' ? callback() : ''; }, initialize: function (callback) { var _ = this; layui.use('table', function () { var table = layui.table; _.table = table; typeof callback == 'function' ? callback(_.table) : ''; }) }, bindRowDBclick: function (el, callback) { var _this = this; var $d = $('body'); $d.on('dblclick', "tbody tr", function (e) { var target = e; var $index = $(this).index(); var $tr = $(el).next().find("tbody tr")[$index]; if (this == $tr) { var list = _this.dataList; var rowData = list[$index]; callback(target, list, rowData) } else { console.error('Illegal operation without registration\n' + '\n') } }) } }
如何使用:
var table = new Table({id:'mo_table'}); table.initialize(function(tableObj){ var col = [ /*{type:'checkbox',width:80}, {title: '賬號(hào)', field: 'account'}, {title: '姓名', field: 'name'}, {title: '性別', field: 'sexName'}, {title: '角色', field: 'roleName'}, {title: '部門(mén)', field: 'deptName'}, {title: '郵箱', field: 'email',event: 'setSign', style:'cursor: pointer;'}, {title: '電話', field: 'phone'}, {title: '創(chuàng)建時(shí)間', field: 'createtime',sort: true}, {title: '狀態(tài)', field: 'statusName'}, {title: '操作', toolbar:'#cellHandle'}*/ ] var ops = { elem: '#mo_table'//自定義dom ,id:'mo_table' ,data: [] ,cols: [col] ,page: true ,height: 200 } table.rederTable(ops,function () { var row = { "birthday":"2018-08-14 08:00:00", "deptName":"陜西省", "createtime":"2018-08-22 16:14:33", "roleid":"6", "sex":1, "deptid":25, "phone":"15822256985", "sexName":"男", "name":"測(cè)試二", "roleName":"代理商管理員", "statusName":"啟用", "id":94, "vehicleId":94, "account":"ceshi2", "email":"524585857@qq.com", "status":1, "longitude":'108', "latitude":'38' } table.addRowItem(row) table.bindRowDBclick( '#mo_table', function (evt,list,rowData) { layer.msg(JSON.stringify(rowData)) //doanything here //雙擊行的回調(diào) }) }); }) //data為行數(shù)據(jù)json table.updateRowItem(data,"id",function(data){ //默認(rèn)更新完的回調(diào) });
layui是一款采用自身模塊規(guī)范編寫(xiě)的前端UI框架,它遵循原生HTML/CSS/JS的書(shū)寫(xiě)與組織形式,門(mén)檻極低,適合新手,并且它還提供了豐富的內(nèi)置模塊,他們皆可通過(guò)模塊化的方式按需加載,從核心代碼到API的每一處細(xì)節(jié)都經(jīng)過(guò)精心雕琢,非常適合界面的快速開(kāi)發(fā),能夠作為PC網(wǎng)頁(yè)端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開(kāi)發(fā)方案。
以上是“l(fā)ayui中table表格如何實(shí)現(xiàn)新增,修改,刪除,查詢,雙擊獲取行數(shù)據(jù)方式”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。