摘要：是一個(gè)基于的快速開(kāi)發(fā)插件，支持?jǐn)?shù)據(jù)表格增刪改查操作，提供通用的組件，通過(guò)配置實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，減少前端重復(fù)開(kāi)發(fā)的工作。注意這里一定要修改為自己項(xiàng)目的配置。列表頁(yè)列表頁(yè)支持通過(guò)表單傳參查詢(xún)數(shù)據(jù)，刷新表格等功能。

fsLayui 是一個(gè)基于layui的快速開(kāi)發(fā)插件，支持?jǐn)?shù)據(jù)表格增刪改查操作，提供通用的組件，通過(guò)配置html實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，減少前端js重復(fù)開(kāi)發(fā)的工作。  
GitHub下載  
碼云下載  
測(cè)試環(huán)境地址：http://fslayui.itcto.cn

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

項(xiàng)目中需要調(diào)用到的常量、變量修改，根據(jù)項(xiàng)目的實(shí)際情況來(lái)配置。  
注意：這里一定要修改為自己項(xiàng)目的配置。

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

拓展form表單驗(yàn)證規(guī)則（自定義的表單驗(yàn)證規(guī)則）

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

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

頁(yè)面開(kāi)發(fā)只需要引入基礎(chǔ)的js和css樣式，配置form表單或table表格，通過(guò)配置快速實(shí)現(xiàn)一個(gè)增刪改查功能。

列表頁(yè)支持通過(guò)form表單傳參查詢(xún)table數(shù)據(jù)，刷新表格等功能。  
表格詳細(xì)配置請(qǐng)參考：fsLayuiPlugin數(shù)據(jù)表格使用

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  



  

    
fsLayuiPlugin
  

  

    

      
      

        

          案例
          

            
首頁(yè)
            
數(shù)據(jù)表格
            
樹(shù)+表格
            
多數(shù)據(jù)表格
            
tab數(shù)據(jù)表格
            
復(fù)雜數(shù)據(jù)表格
            
聯(lián)動(dòng)數(shù)據(jù)表格
            
聯(lián)動(dòng)數(shù)據(jù)表格(復(fù)雜)
          
        
      
    
  

  

    

      

        

          

            

              

                

                  id：
                  

                    
                  
                
                

                  名稱(chēng)：
                  

                    
                  
                
                

                  時(shí)間：
                  

                    
                  
                
                

                  

                    查詢(xún)
                  
                
              
            
          
        
        

         

           

             
               新增
             
             
               刪除
             
             
               ဂ刷新
             
           
           

             

             

                

                

                

                

                

                

                

                

                

                

              

              

              
              
            
          

        

      
    
  

  

    
    ?2017 www.fallsea.com
  

菜單賦予強(qiáng)大的功能，通過(guò)簡(jiǎn)單的配置，快速達(dá)到需要的效果。  
例如:

彈出一個(gè)新的窗口

關(guān)閉窗口

查詢(xún)talbe

提交數(shù)據(jù)(確認(rèn)提示按鈕)

選擇table

等...，
菜單信息配置請(qǐng)參考：菜單配置說(shuō)明

function="top" 描述彈出窗口

topUrl="add.html" 指定打開(kāi)

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

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

topTitle="新增demo" 彈出窗口標(biāo)題

  新增

function="top" 描述彈出窗口

topUrl="edit.html" 指定打開(kāi)

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

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

topTitle="編輯demo" 彈出窗口標(biāo)題

isSelect="1" 必須單選

inputs="id:" 選中的參數(shù)信息

  編輯

function="submit" 描述提交數(shù)據(jù)

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

isSelect="1" 必須單選

isConfirm="1" 彈出確認(rèn)提示

confirmMsg="是否確定刪除選中的數(shù)據(jù)？" 自定義確認(rèn)提升內(nèi)容

inputs="id:" 提交的參數(shù)信息

  刪除

function="refresh" 描述刷新表格

  ဂ刷新

新增頁(yè)面可以直接配置一個(gè)url提交地址，自動(dòng)把form表單數(shù)據(jù)提交到后臺(tái)，提交成功后，自動(dòng)關(guān)閉彈出的窗口，刷新table表格數(shù)據(jù)：fsLayuiPlugin數(shù)據(jù)表格彈出form表單說(shuō)明

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        

          名稱(chēng)
          

            
          
        
        

          類(lèi)型
          

            
            
            
          
        
        

          性別
          

            
            
          
          狀態(tài)
          

            
          
        
        

          城市
          

            
            
          
          創(chuàng)建時(shí)間
          

            
          
        

        

          省份
          

            
            
          
          城市
          

            
            
          
          區(qū)
          

            
            
          
        

        

          附件
          

            
          
          

            上傳圖片
          
        
        

          描述
          

            
          
        
        

        

          新增
          關(guān)閉
        
      
    
  

編輯頁(yè)面需要配置一個(gè)加載當(dāng)個(gè)數(shù)據(jù)的地址，配置后自動(dòng)一步查詢(xún)數(shù)據(jù)和填充數(shù)據(jù)；   
然后配置一個(gè)url提交地址，自動(dòng)把form表單數(shù)據(jù)提交到后臺(tái)，提交成功后，自動(dòng)關(guān)閉彈出的窗口，刷新table表格數(shù)據(jù)：fsLayuiPlugin數(shù)據(jù)表格彈出form表單說(shuō)明

  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    

      

        

          名稱(chēng)
          

            
          
        
        

          類(lèi)型
          

            
            
            
          
        
        

          性別
          

            
            
          
          狀態(tài)
          

            
          
        
        

          城市
          

            
            
          
          創(chuàng)建時(shí)間
          

            
          
        

        

          省份
          

            
            
          
          城市
          

            
            
          
          區(qū)
          

            
            
          
        

        

          附件
          

            
          
          

            上傳圖片
          
        
        

          描述
          

            
          
        
        

        

          編輯
          關(guān)閉
        
      
    
  

本文首發(fā)于我的博客：ITCTO技術(shù)博客