踩过的layui的那些坑。

小编是不是一个专职前端开发的， 只不过现在程序员的日子越来越难了，不得已要多学一些前端框架来武装自己。

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官方文档中有指出可以携带多个参数到后台，但我试了试拿不到值不知道什么原因。有知道的大佬可以留言告知一下。

好了。项目做完了，文档先整理这么多吧。