layUI rableは、データの読み込み、データの更新、パラメータの転送を初期化する.

13398 ワード

背景:
筆者は以前からbootstrap tableを使っていましたが、現在のプロジェクトでは主にLayuiのフレームを使っていますので、Layui tableに従って、使う時に問題がありました.もちろん自分の知らない鍋のせいです.
発生した問題:
1、Layui公式から提供された「スタティック・フォームの変換」方式を使って、タイムズidが見つけられないエラーを初期化する(自分の鍋).
2、パラメータ問題(とりあえずLayuiオフィシャル鍋)
最初にソーステーブルのコードを貼り付けます.
<table class="layui-table" lay-filter="EditListTable">
  <thead>
    <tr>
      <th lay-data="{field:'Index', width:60}">  th>
      <th lay-data="{field:'UserId', width:80}">  IDth>
      <th lay-data="{field:'UserName', width:80}">  th>
      <th lay-data="{field:'Year', width:70}">  th>
      <th lay-data="{field:'M01', width:80}">  th>
      <th lay-data="{field:'M02', width:80}">  th>                            
      <th lay-data="{field:'YearValue', width:80, fixed: 'right'}">  th>
      <th lay-data="{width:100, align:'center', toolbar: '#barDemo1', fixed: 'right'}">  th>
    tr>
  thead>
table>
<script type="text/html" id="barDemo1">
    <a class="layui-btn layui-btn-mini" lay-event="edit">  a>
script> 
直接コードにコメントを通して説明します.
(function () {
    //        url
    var getListUrl = '';

    //       table,       ,             ,    ,               :         
    //        ,                ,      js       Layui   
    //        Layui table           
    //           Layui table,          table ,   js ,  table           ,          js      
    var tableOptions = {
        url: getListUrl, //    
        method: 'POST', //  
        id: 'listReload', //   Layui table     id,    ,        ,        
        page: false, //    
        where: { type: "all" }, //         ,         ,           ,      where: { key : { type: "all" } },          ,   ,key             ,    type   ,      key   Layui      ,       
        response: { //     json   ,        
            statusName: 'Code', //      
            statusCode: '200', //       
            msgName: 'Message', //    
            countName: 'Total', //    
            dataName: 'Result' //    
        }
    };

    //
    layui.use(['table', 'layer'], function () {//layui     ,        
        var layer = layui.layer, table = layui.table;

        //    
        var createTable = function () {
            table.init('EditListTable', tableOptions);// table lay-filter
        };

        //     
        var reloadTable = function (item) {
            table.reload("listReload", { //              id
                where: {
                    //key: { //         
                        type: item.type, id: item.id
                    //}
                }
            });
        };

        //    
        createTable();

        //    tree      ,        tree        
    });
})();
バックエンドの方法:
//    ,      
public ActionResult GetGoalList(string type, string id)
{
      //
}


//           ,        
public ActionResult GetGoalList(keyItem key)
{
      //
}
public class keyItem
{
    public string id { get; set; }
    public string type { get; set; }
}
例が短いので、参考にしたいだけです.何か分からないところがあれば、公式文書を参考にしてください.http://www.cnblogs.com/herbertchina/p/7503927.html!