小编是不是一个专职前端开发的, 只不过现在程序员的日子越来越难了,不得已要多学一些前端框架来武装自己。
layui我是第一次使用,先来的公司里面前端用的只有layui,所以要学习了。
layui官方文档地址:https://www.layui.com/doc/modules/upload.html
下面就给大家分享一下吧。
1.layuitree树形列表
引入第三方工具类
代码如下:
var tableIns;
layui.config({
base: '/resources/layui/extend/'
}).extend({
treeGrid: 'treeGrid',
dtree: '{/}/resources/layui_ext/dtree/dtree' // {/}的意思即代表采用自有路径,即不跟随 base 路径
}).use(['jquery', 'treeGrid', 'layer', 'table', 'dtree', 'form'], function () {
var $ = layui.jquery
, treeGrid = layui.treeGrid//很重要
, layer = layui.layer
, dtree = layui.dtree
, form = layui.form
, table = layui.table;
tableIns = treeGrid.render({
elem: '#treeTable'
, id: 'treeTable'
, url: "zcjjfllistManager"
, toolbar: "#ToolBar"
, idField: 'id'
/*,cellMinWidth: 100*/
, treeId: 'zcjjfl'//树形id字段名称
, treeUpId: 'sjflbm'//树形父id字段名称
, treeShowName: 'zcjjfl'//以树形式显示的字段
这是layui第三方工具。里面也有一坑引用了tree之后table头部按钮监听不到,要绑定onclick事件才能起作用
2.动态记载下拉列表+自定义属性
可循环下载多个下拉框。
监听下拉框
form.on('select(obj)', function (data) {
if (data.value == null || data.value == '') {
return;
}
var fzhskmbh = data.value;
var id = data.elem.getAttribute("id");
var obj = document.getElementById(id);
var pzbh = data.elem.getAttribute("pzbhname");
var aa = data.elem.getAttribute("pzbhname");
var kmbh = data.elem.getAttribute("kmbhname");
var fzhslb = data.elem.getAttribute("fzhslb");
var fzhskmmc = data.elem[data.elem.selectedIndex].text;
var fzhsxm = data.elem[data.elem.selectedIndex].getAttribute('fzhsxm');//获取选中option中的自定义属性
$.post("addfzhsxmz",
{
"pzbh": pzbh,
"fzhskmbh": fzhskmbh,
"kmbh": kmbh,
"fzhslb": fzhslb,
"fzhskmmc": fzhskmmc,
"fzhsxm": fzhsxm
}, function (res) {
layer.msg(res.msg);
})
});
3.form中reset方法
如:$("#dataFrm")[0].reset(); 在打开弹窗中会清除不掉定义的hidden<input>中的值,所以最好是指定清除。
4.文件上传
var uploadInst = upload.render({ elem: '#excelsave' //绑定元素 ,url: '/zjls/excelupload' //上传接口 ,accept:'file'//允许的文件类型 ,field:'mf' ,exts: 'xls|excel|xlsx' ,done: function(res){ // alert("上传请求") var path=res.path; var excelpath=$("#excelpath"); var excelsave=$("#excelsave"); var oldName = res.oldName; $("#oldName").val(oldName); excelsave.addClass("layui-btn-disabled"); $("#uptext").html("已选择"); excelpath.val(path); console.log(excelpath.val()); /* layer.msg("文件已经接收成功!请点击:\"立即导入\"快速生成数据");*/ } ,error: function(){ // alert("上传出错") layer.msg("上传出错!") } });
layui官方文档中有指出可以携带多个参数到后台,但我试了试拿不到值不知道什么原因。有知道的大佬可以留言告知一下。
好了。项目做完了,文档先整理这么多吧。