摘要：是一個基于的快速開發插件，支持數據表格增刪改查操作，提供通用的組件，通過配置實現數據請求，減少前端重復開發的工作。注意這里一定要修改為自己項目的配置。列表頁列表頁支持通過表單傳參查詢數據，刷新表格等功能。

fsLayui 是一個基于layui的快速開發插件，支持數據表格增刪改查操作，提供通用的組件，通過配置html實現數據請求，減少前端js重復開發的工作。  
GitHub下載  
碼云下載  
測試環境地址：http://fslayui.itcto.cn

修改配置文件 plugins/frame/js/fsConfig.js

項目中需要調用到的常量、變量修改，根據項目的實際情況來配置。  
注意：這里一定要修改為自己項目的配置。

fsConfig["global"] = {
  "servletUrl":"https://fs.fallsea.com", //異步請求地址,本地工程可以不填
  "loginUrl" : "/login", //登錄url
  "uploadUrl" : "https://fs.fallsea.com/upload", //上傳附件url
  "uploadHtmlUrl" : "/plugins/frame/views/upload.html", //上傳附件html地址，默認/plugins/frame/views/upload.html
  "loadDataType":"1",//加載數據類型，1：是，0：否，默認0  （編輯或查看是否取緩存數據）
  "result" : { //響應結果配置
    "statusName": "errorNo", //數據狀態的字段名稱，默認：errorNo
    "msgName": "errorInfo", //狀態信息的字段名稱，默認：errorInfo
    "dataName" : "results.data", //數據列表的字段名稱，默認：results.data
  },
  "page" : { //分頁配置
      "request": {//請求配置
      "pageName": "pageNum", //頁碼的參數名稱，默認：pageNum
      "limitName": "pageSize" //每頁數據量的參數名，默認：pageSize
    },
    "response": {//響應配置
      "countName": "results.data.total", //數據總數的字段名稱，默認：results.data.total
      "dataName" : "results.data", //數據列表的字段名稱，默認：results.data
      "dataNamePage": "results.data.list" //分頁數據列表的字段名稱，默認：results.data.list
    }//,
//  "limit":10,//每頁分頁數量。默認20
//  "limits":[10,20,30,50,100]//每頁數據選擇項，默認[10,20,30,50,100]
  }
};

拓展form表單驗證規則（自定義的表單驗證規則）

fsConfig["verify"] = {
  /**
   * 對比兩個值相等
   */
  "equals": function(value, item){ //value：表單的值、item：表單的DOM對象
    var equalsId = $(item).attr("equalsId");
    if(_.isEmpty(equalsId)){
      return "未配置對比id";
    }
    var value2 = $("#"+equalsId).val();

    if(!_.eq(value,value2))
    {
      var equalsMsg = $(item).attr("equalsMsg");
      if(_.isEmpty(equalsMsg))
      {
          equalsMsg = "值不相等";
      }
      return equalsMsg;
    }
  },
  /**
   * 用戶名驗證
   */
  "username": [
      /^[a-zA-Z]{1}([a-zA-Z0-9]|[_]){2,19}$/,
      "用戶名格式不正確!"
  ],
  /**
   * 最小、最大長度判斷
   */
  "length": function(value, item){ //value：表單的值、item：表單的DOM對象
    var minLength = $(item).attr("minLength");//最小長度
    var maxLength = $(item).attr("maxLength");//最大長度
    if(!_.isEmpty(minLength) && !_.eq("0",minLength) && _.gt(minLength,value.length)){
        return "輸入內容小于最小值:"+minLength;
    }
    if(!_.isEmpty(maxLength) && !_.eq("0",maxLength) && _.gt(value.length,maxLength)){
        return "輸入內容大于最小值:"+maxLength;
    }
  }
};

頁面開發只需要引入基礎的js和css樣式，配置form表單或table表格，通過配置快速實現一個增刪改查功能。

列表頁支持通過form表單傳參查詢table數據，刷新表格等功能。  
表格詳細配置請參考：fsLayuiPlugin數據表格使用

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



  

    
fsLayuiPlugin
  

  

    

      
      

        

          案例
          

            
首頁
            
數據表格
            
樹+表格
            
多數據表格
            
tab數據表格
            
復雜數據表格
            
聯動數據表格
            
聯動數據表格(復雜)
          
        
      
    
  

  

    

      

        

          

            

              

                

                  id：
                  

                    
                  
                
                

                  名稱：
                  

                    
                  
                
                

                  時間：
                  

                    
                  
                
                

                  

                    查詢
                  
                
              
            
          
        
        

         

           

             
               新增
             
             
               刪除
             
             
               ဂ刷新
             
           
           

             

             

                

                

                

                

                

                

                

                

                

                

              

              

              
              
            
          

        

      
    
  

  

    
    ?2017 www.fallsea.com
  

菜單賦予強大的功能，通過簡單的配置，快速達到需要的效果。  
例如:

彈出一個新的窗口

關閉窗口

查詢talbe

提交數據(確認提示按鈕)

選擇table

等...，
菜單信息配置請參考：菜單配置說明

function="top" 描述彈出窗口

topUrl="add.html" 指定打開

topWidth="700px" 彈出窗口寬度

topHeight="500px" 彈出窗口高度

topTitle="新增demo" 彈出窗口標題

  新增

function="top" 描述彈出窗口

topUrl="edit.html" 指定打開

topWidth="700px" 彈出窗口寬度

topHeight="500px" 彈出窗口高度

topTitle="編輯demo" 彈出窗口標題

isSelect="1" 必須單選

inputs="id:" 選中的參數信息

  編輯

function="submit" 描述提交數據

url="/fsbus/1002" 提交的url地址

isSelect="1" 必須單選

isConfirm="1" 彈出確認提示

confirmMsg="是否確定刪除選中的數據？" 自定義確認提升內容

inputs="id:" 提交的參數信息

  刪除

function="refresh" 描述刷新表格

  ဂ刷新

新增頁面可以直接配置一個url提交地址，自動把form表單數據提交到后臺，提交成功后，自動關閉彈出的窗口，刷新table表格數據：fsLayuiPlugin數據表格彈出form表單說明

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        

          名稱
          

            
          
        
        

          類型
          

            
            
            
          
        
        

          性別
          

            
            
          
          狀態
          

            
          
        
        

          城市
          

            
            
          
          創建時間
          

            
          
        

        

          省份
          

            
            
          
          城市
          

            
            
          
          區
          

            
            
          
        

        

          附件
          

            
          
          

            上傳圖片
          
        
        

          描述
          

            
          
        
        

        

          新增
          關閉
        
      
    
  

編輯頁面需要配置一個加載當個數據的地址，配置后自動一步查詢數據和填充數據；   
然后配置一個url提交地址，自動把form表單數據提交到后臺，提交成功后，自動關閉彈出的窗口，刷新table表格數據：fsLayuiPlugin數據表格彈出form表單說明

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        

          名稱
          

            
          
        
        

          類型
          

            
            
            
          
        
        

          性別
          

            
            
          
          狀態
          

            
          
        
        

          城市
          

            
            
          
          創建時間
          

            
          
        

        

          省份
          

            
            
          
          城市
          

            
            
          
          區
          

            
            
          
        

        

          附件
          

            
          
          

            上傳圖片
          
        
        

          描述
          

            
          
        
        

        

          編輯
          關閉
        
      
    
  

本文首發于我的博客：ITCTO技術博客