layui已經提供了一整套的ui布局及相關元件，並且有相當完善的api文件，本文重點在於thymeleaf中如何使用layui，包括公用部分的提取，而非簡單的layui的用法。先上兩個效果圖
列表.png
表單.png
1.像傳統的一樣建檔案頭和尾（但是又和傳統的寫法不同，見下面**）
2.定義公用js--common.js
3.定義公用css--用來重寫一些樣式或者自定義樣式
4.編寫列表頁
5.編寫表單頁
樣式檔案 link.html
1.inittable初始化帶分頁的table，注意其中的request屬性，可以配置和你後台page物件對應的屬性，具體可以參考layui官方文件
2.searchtabletable的搜尋功能，呼叫layui table模組的的過載功能，引數組建思路：獲取序列化的表單，組裝成json物件
3.upload檔案上傳
4.openframe開啟彈出層，基於最頂層彈出
var common = function () ,
request: ,
done: function (res, curr, count)
}});
};var searchtable = function (formid, tableins) ,
page:
});};
var getparams = function (formid) ;
$.each($('#' + formid).serializearray(), function (i, field)
});return _params;
};var upload = function (eleid, layupload, done, error, accept, exts)
}, error: function ()
}});
};var openframe = function (url, title, width, height) );
};return ,
searchtable: function (formid, table) ,
uploadfile: function (eleid, layupload, done, error, accept, exts) ,
openframe: function (url, title, width, height)
}}();
.form-body
.layui-input-inline
1.上面form為搜尋內容部分
2.中間乙個table為主視窗
3.注意乙個id="*******s"的js，為工具條，用於追加在每一列的後面
4.可以看到下面頁面初始化等都呼叫了common.js中的對應方法
條件搜尋
form.html
layui.use('form', function ()
}, password: function (value)
}, phone: [/^1[3|4|5|7|8]\d$/, '手機必須11位，只能是數字！']
, email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]$|^1[3|4|5|7|8]\d$/, '郵箱格式不對']
});})
idea使用thymeleaf模板時，頁面取值總提示無法解析變數，但是又不影響實際應用，據說idea2017.3已經解決了，但是我現在用的2017.2，沒有更新，但是同樣可以解決。錯誤提示如圖
波浪線提示.png
解決方法也很簡單：file--settings--editor--inspections--thymeleaf,去掉第乙個校驗即可。
去掉波浪線提示.png
thymeleaf使用詳解
thymeleaf介紹 thymeleaf是一款用於渲染xml xhtml html5內容的模板引擎。類似jsp，velocity，freemaker等，它也可以輕易的與spring mvc等web框架進行整合作為web應用的模板引擎。與其它模板引擎相比，thymeleaf最大的特點是能夠直接在瀏覽...
thymeleaf標籤使用
常用th標籤都有那些？關鍵字 功能介紹 案例 th id 替換id th text 文字替換 description th utext 支援html的文字替換 conten th object 替換物件 th value 屬性賦值 th with 變數賦值運算 th style 設定樣式 th st...
使用Thymeleaf替代jsp
這是一項可以使用純html替代jsp的方案,在spring中只需要配置三個bean以及編寫使用指定命名空間html檔案即可.對html檔案的修改並不能即時生效,必須在重啟專案對html檔案重新編譯後才會生效 配置 在webconfig下 生成三個bean bean 生成模板解析器 public it...