The holes in layui that you stepped on.

Is Xiaobian a full-time front-end developer? It's just that it's becoming more and more difficult for programmers now. They have to learn more front-end frameworks to arm themselves.

This is the first time I use layui. The first company uses only layui in the front end, so I have to learn.

layui official document address:

Let's share it with you.

1.layuitree tree list

Introducing third-party tools

The code is as follows:

var tableIns;
   base: '/resources/layui/extend/'
   treeGrid: 'treeGrid',
   dtree: '{/}/resources/layui_ext/dtree/dtree'   // {/} means to adopt its own path, that is, not follow the base path
}).use(['jquery', 'treeGrid', 'layer', 'table', 'dtree', 'form'], function () {
   var $ = layui.jquery
         , treeGrid = layui.treeGrid//Very important
         , 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'//Tree id field name
      , treeUpId: 'sjflbm'//Tree parent id field name
      , treeShowName: 'zcjjfl'//Fields displayed as a tree

This is a third-party tool for layui. There is also a pit in it. After the tree is referenced, the table header button cannot be listened to, and the onclick event must be bound to work

2. Dynamic record drop-down list + user defined attribute

Multiple drop-down boxes can be downloaded circularly.

Listening drop-down box

form.on('select(obj)', function (data) {
   if (data.value == null || data.value == '') {
   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');//Gets the custom attribute in the selected option
                  "pzbh": pzbh,
                  "fzhskmbh": fzhskmbh,
                  "kmbh": kmbh,
                  "fzhslb": fzhslb,
                  "fzhskmmc": fzhskmmc,
                  "fzhsxm": fzhsxm
               }, function (res) {


3. reset method in form

For example: $("#datafrm") [0] reset(); The value in the defined hidden < input > cannot be cleared in the pop-up window, so it is best to specify clearing.

4. File upload

var uploadInst = upload.render({
   Elem: '#excel save' / / binding element
   , URL: '/ zjls / Excel upload' / / upload interface
   , accept:'file' / / allowed file types
   ,exts: 'xls|excel|xlsx'
   ,done: function(res){
       //alert("upload request")
      var path=res.path;
      var excelpath=$("#excelpath");
      var excelsave=$("#excelsave");
      var oldName = res.oldName;
      /* layer.msg("the file has been received successfully! Please click: \" import now \ "quickly generate data")*/
   ,error: function(){
     //alert("upload error")
      layer.msg("upload error!")

The official layui document indicates that multiple parameters can be carried to the background, but I tried and couldn't get the value. I don't know why. You can leave a message if you know.

okay. When the project is finished, sort out so many documents first.

Tags: Javascript JQuery

Posted by luddeb on Mon, 16 May 2022 03:23:53 +0300