layui將table轉(zhuǎn)化表單顯示的方法(即table.render轉(zhuǎn)為表單展示)
現(xiàn)有一個
table.render({
id : 'table',
type:'post',
elem : '#table',
url : url,
where : {'Id' : $data.Id},
page:false,
cols : [ [ //表頭
]]
})
最簡單直接用ajax請求,確保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)測編輯的對應(yīng)行
if(nowTemp){
nowTemp.addClass("layui-table-double");
}
})
}
})
監(jiān)聽每一個ul中動態(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");
//點擊每個動態(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('真的要刪除嗎?', 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)為表單展示)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript數(shù)據(jù)庫TaffyDB用法實例分析
這篇文章主要介紹了JavaScript數(shù)據(jù)庫TaffyDB用法,實例分析了TaffyDB數(shù)據(jù)庫的定義、查詢、更新、刪除等操作的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JavaScript實現(xiàn)元素滾動條到達(dá)一定位置循環(huán)追加內(nèi)容
下面小編就為大家分享一篇JavaScript實現(xiàn)元素滾動條到達(dá)一定位置循環(huán)追加內(nèi)容,具有很好的參考價值,希望對大家有所幫助2017-12-12
關(guān)于javascript sort()排序你可能忽略的一點理解
最近在研究Javascript發(fā)現(xiàn)了其中一些之前忽略的問題,所以想著總結(jié)分享出來,下面這篇文章主要給大家介紹了關(guān)于javascript sort()排序你可能忽略的一點理解,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07
vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記!
以目前的vscode版本來說,作者并沒有開放訪問本地媒體權(quán)限,所以插件市場里面的所有語音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限,這篇文章主要介紹了vscode錄音及語音實時轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記!,需要的朋友可以參考下2023-05-05
HTML+CSS+JavaScript實現(xiàn)簡單日歷效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實現(xiàn)簡單日歷效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
Textbox控件注冊回車事件及觸發(fā)按鈕提交事件具體實現(xiàn)
Lyncplus客戶端中訪問Web頁面時遇到了TextBox控件回車自動完成按鈕的提交事件失效的情況,于是上網(wǎng)查找相關(guān)的介紹最終解決了這兩個問題,感興趣的你可以參考下或許對你有所幫助2013-03-03

