layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)
現(xiàn)有一個(gè)
table.render({ id : 'table', type:'post', elem : '#table', url : url, where : {'Id' : $data.Id}, page:false, cols : [ [ //表頭 ]] })
最簡(jiǎn)單直接用ajax請(qǐng)求,確保url路徑正確
$.ajax({ dataType:'json', type:'post', url:url, data:{'Id': $data.Id}, success:function (data) { $.each(data.rows,function (k,v) { var myJson=JSON.stringify(v);//轉(zhuǎn)化格式便于傳遞 //遍歷展示,將每一行數(shù)據(jù)分別隱藏在span便簽 $(".ul").append("<li value="+v.id+" class='layui-btn layui-btn-add '>" +v.Name+ "<span class='vid'>"+myJson+"</span>"+ "</li>" ) var nowTemp=$("li[value='"+temp+"']");//監(jiān)測(cè)編輯的對(duì)應(yīng)行 if(nowTemp){ nowTemp.addClass("layui-table-double"); } }) } })
監(jiān)聽每一個(gè)ul中動(dòng)態(tài)產(chǎn)生的li
$('ul').on('click', 'li', function () { var data=JSON.parse($(this).find('.vid').text()); $(this).addClass("layui-table-double"); $(this).siblings().removeClass("layui-table-double"); //點(diǎn)擊每個(gè)動(dòng)態(tài)生成的li標(biāo)簽,可以將其內(nèi)部span隱藏的數(shù)據(jù)展示出來 appmod.formRender('Form',data); });
可以編輯
$('.edit').click(function () { var dataTemp=$(".layui-table-double span").text(); var data=JSON.parse(dataTemp); appmod.formRender('Form',data); //修改后重新提交 })
刪除按鈕
$('.del').click(function () { var dataTemp=$(".layui-table-double span").text(); var data=JSON.parse(dataTemp); layer.confirm('真的要?jiǎng)h除嗎?', function(index) { $.ajax(url,{'id' : data.id},function(){ layer.close(index); window.location.reload() }); }); })
保存(確認(rèn)修改)
var temp=0 form.on('submit(save)', function(data){ try{ var formData = data.field; appmod.convertFormData('Form',formData); var ids = []; formData = $.extend(formData,{Ids:ids}); $.ajax(url,formData,function(resp){ $(".ul li").remove(); var newId=$("[name=id]").val(); temp=newId; //調(diào)用本文第二段代碼塊 }); }catch(e){ $.showErr('未知異常'); } return false; });
以上這篇layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript數(shù)據(jù)庫(kù)TaffyDB用法實(shí)例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫(kù)TaffyDB用法,實(shí)例分析了TaffyDB數(shù)據(jù)庫(kù)的定義、查詢、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07JavaScript實(shí)現(xiàn)元素滾動(dòng)條到達(dá)一定位置循環(huán)追加內(nèi)容
下面小編就為大家分享一篇JavaScript實(shí)現(xiàn)元素滾動(dòng)條到達(dá)一定位置循環(huán)追加內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12關(guān)于javascript sort()排序你可能忽略的一點(diǎn)理解
最近在研究Javascript發(fā)現(xiàn)了其中一些之前忽略的問題,所以想著總結(jié)分享出來,下面這篇文章主要給大家介紹了關(guān)于javascript sort()排序你可能忽略的一點(diǎn)理解,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07vscode錄音及語音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記!
以目前的vscode版本來說,作者并沒有開放訪問本地媒體權(quán)限,所以插件市場(chǎng)里面的所有語音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限,這篇文章主要介紹了vscode錄音及語音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記!,需要的朋友可以參考下2023-05-05HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)簡(jiǎn)單日歷效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Textbox控件注冊(cè)回車事件及觸發(fā)按鈕提交事件具體實(shí)現(xiàn)
Lyncplus客戶端中訪問Web頁(yè)面時(shí)遇到了TextBox控件回車自動(dòng)完成按鈕的提交事件失效的情況,于是上網(wǎng)查找相關(guān)的介紹最終解決了這兩個(gè)問題,感興趣的你可以參考下或許對(duì)你有所幫助2013-03-03