Lauiuiのテーブルモジュールでの基本的なパラメータの適用-ライユイのチュートリアル-php.cn

ホームページ

ウェブフロントエンド

ライユイのチュートリアル

Lauiuiのテーブルモジュールでの基本的なパラメータの適用

尚

Nov 19, 2019 pm 05:07 PM

layuitable

Lauiuiのテーブルモジュールでの基本的なパラメータの適用

layui のテーブルモジュールは主な焦点であり、基本パラメータの点で可能な限り使いやすくなっています。つまり、過度に複雑な構成を避けながら機能の前提条件を確保しています。

基本パラメータは通常、次のシナリオに表示されます。

シナリオ 1: 次のレイデータの内容は、基本パラメータ項目です。覚えておいてください: 値は一重引用符で囲む必要があります

<table lay-data="{height:300, url:&#39;/api/data&#39;}" lay-filter="demo"> …… </table>

シナリオ 2: 次のメソッドのキー値は基本パラメータ項目です

table.render({
  height: 300
  ,url: &#39;/api/data&#39;
});

その他のシナリオ: 次のオプションは基本パラメータです。 object

> table.init(&#39;filter&#39;, options); //转化静态表格
> var tableObj = table.render({});
  tableObj.reload(options); //重载表格

基本的な要素を見てみましょう?

1. elem - バインディング要素は元のテーブルコンテナを指定しますが、これは table.render() のレンダリングメソッド

HTML：
<table id="test"></table>     
 
JS：
table.render({ //其它参数在此省略
  elem: &#39;#test&#39; //或 elem: document.getElementById(&#39;test&#39;) 等
});

2 にのみ適用されます。テーブルヘッダー、ここでは多くの値が含まれており、2次元配列です。テーブルの「メソッドレベルのレンダリング」を使用する場合は、このパラメータを使用してテーブルを設定する必要があります。例:

JS：
table.render({
  cols:  [[ //标题栏
    {checkbox: true}
    ,{field: &#39;id&#39;, title: &#39;ID&#39;, width: 80}
    ,{field: &#39;username&#39;, title: &#39;用户名&#39;, width: 120}
  ]]
});
 
它等价于：
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
  <thead>
    <tr>
      <th lay-data="{checkbox:true}"></th>
      <th lay-data="{field:&#39;id&#39;, width:80}">ID</th>
      <th lay-data="{field:&#39;username&#39;, width:180}">用户名</th>
    </tr>
  </thead>
</table>

次に、セカンダリヘッダーの例を示します:

JS：
table.render({
  cols:  [[ //标题栏
    {field: &#39;username&#39;, title: &#39;联系人&#39;, width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
    ,{field: &#39;amount&#39;, title: &#39;金额&#39;, width: 80, rowspan: 2}
    ,{align: &#39;center&#39;, title: &#39;地址&#39;, colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width
  ], [
    {field: &#39;province&#39;, title: &#39;省&#39;, width: 80}
    ,{field: &#39;city&#39;, title: &#39;市&#39;, width: 120}
    ,{field: &#39;county&#39;, title: &#39;详细&#39;, width: 300}
  ]]
});
 
它等价于：
<table class="layui-table" lay-data="{基础参数}">
  <thead>
    <tr>
      <th lay-data="{field:&#39;username&#39;, width:80}" rowspan="2">联系人</th>
      <th lay-data="{field:&#39;amount&#39;, width:120}" rowspan="2">金额</th>
      <th lay-data="{align:&#39;center&#39;}" colspan="3">地址</th>
    </tr>
    <tr>
      <th lay-data="{field:&#39;province&#39;, width:80}">省</th>
      <th lay-data="{field:&#39;city&#39;, width:120}">市</th>
      <th lay-data="{field:&#39;county&#39;, width:300}">详细</th>
    </tr>
  </thead>
</table>

テーブルモジュールは Infinitus ヘッダーをサポートしており、上記の方法で拡張を続けることができることに注意してください。核心は、rowspan とcolspan の 2 つのパラメータにあります。

次のステップは、ヘッダーのパラメータ設定です。

table.render({
  cols: [[
    {field: &#39;id&#39;} //其它参数在此省略
    ,{field: &#39;username&#39;}
  ]]
});
 
等价于：
<th lay-data="{field:&#39;id&#39;}"></th>
<th lay-data="{field:&#39;username&#39;}"></th>

タイトル: タイトル名を設定します

table.render({
  cols: [[
    {title: &#39;邮箱&#39;} //其它参数在此省略
    ,{title: &#39;签名&#39;}
  ]]
});
 
等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:&#39;邮箱&#39;）
<th lay-data="{}">签名</th>

幅:固定列幅 を設定します。通常、列幅の設定が必要です (チェックボックス列、ツールバーなどの「特別な列」を除く)。これはテーブル全体の美しさに関係します。

table.render({
  cols: [[
    {width: 80} //其它参数在此省略
    ,{width: 120}
  ]]
});
 
等价于：
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th>

チェックボックス: チェックボックスを設定します。 true に設定すると、この列の内容がチェックボックスであることを意味し、通常は最初の列に配置されます。

table.render({
  cols: [[
    {checkbox: true} //其它参数在此省略
    ,{field: &#39;id&#39;, title:&#39;ID&#39;, width: 100}
  ]]
});
 
等价于：
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

ここでの LAY_CHECKED はチェックボックスと組み合わせて使用されることにも注意してください。true に設定すると、すべてのチェックボックスがデフォルトで選択されることを意味します。

table.render({
  cols: [[
    {checkbox: true, LAY_CHECKED: true} //其它参数在此省略
    ,{field: &#39;id&#39;, title:&#39;ID&#39;, width: 100}
  ]]
});
 
等价于：
<th lay-data="{checkbox:true, LAY_CHECKED: true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

スペース: ギャップ列を設定します。 true に設定すると、コンテンツのない幅 15 ピクセルの列が定義されます。

table.render({
  cols: [[ //其它参数在此省略
    {space: true}
    ,{field: &#39;id&#39;, title:&#39;ID&#39;, width: 100}
  ]]
});
 
等价于：
<th lay-data="{space:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

sort: 並べ替えが必要かどうか。 true に設定すると、対応するテーブルヘッダーに並べ替えアイコンが表示され、列の並べ替え機能が有効になります。

注: 値が存在する列 (数値と通常の文字) の並べ替えを有効にすることはお勧めできません。辞書式比較が発生するためです。例: 'Xianxin' > '2' > '100' ご希望の結果ではないかもしれませんが、辞書のソートアルゴリズム (ASCII コード比較) は次のようになります。詳細については辞書についても学ぶことができます。順序の知識。

table.render({
  cols: [[
    {sort:true} //其它参数在此省略
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
  ]]
});
 
等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

固定: 固定列が必要かどうか。 true または 'right' が設定されている場合、対応する列は左側または右側に固定され、スクロールバーでスクロールしません。

table.render({
  cols: [[
    {fixed:true} //其它参数在此省略
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
    ,{field:&#39;username&#39;, title:&#39;姓名&#39;, width:120, fixed:&#39;right&#39;} //固定列在右
  ]]
});
 
等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{field:&#39;username&#39;, width:120, fixed:&#39;right&#39;}">姓名</th>

edit: 編集を許可するかどうか。 true に設定すると、対応する列のセルの編集が許可されます。現在、type="text" の入力編集のみがサポートされています。

table.render({
  cols: [[
    {edit:&#39;text&#39;} //其它参数在此省略
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
  ]]
});
 
等价于：
<th lay-data="{edit:&#39;text&#39;}"></th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

テンプレット: カスタムテンプレート。 デフォルトでは、セルのコンテンツは、データインターフェイスによって返されたコンテンツに従って正確に出力されます。特定の列のセルにリンクやその他の要素を追加したい場合は、次の助けを借りて簡単にこれを実現できます。このパラメータ。これは非常に実用的な機能であり、テーブルの内容が豊富で多様になります。

table.render({
  cols: [[
    {field:&#39;title&#39;, title: &#39;文章标题&#39;, width: 200, templet: &#39;#titleTpl&#39;} //这里的templet值是模板元素的选择器
    ,{field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
  ]]
});
 
等价于：
<th lay-data="{field:&#39;title&#39;, width: 200, templet: &#39;#titleTpl&#39;}">文章标题</th>
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>

実際、テンプレットは、次のように HTML コンテンツの一部であることもできます:

templet: &#39;<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>&#39; 
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

ツールバー: バインドツールバー。 通常、テーブルの各行には、表示、編集、削除などの同様の操作ボタンを追加する必要がありますが、そのためにツールパラメータが誕生するため、さまざまな操作機能を非常に便利に実装できます。

tool パラメータは、templet パラメータとまったく同じ方法で使用され、通常はセレクタまたは HTML 文字のセグメントを受け入れます。

table.render({
  cols: [[
    {field:&#39;id&#39;, title:&#39;ID&#39;, width:100}
    ,{fixed: &#39;right&#39;, width:150, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;} //这里的toolbar值是模板元素的选择器
  ]]
});
 
等价于：
<th lay-data="{field:&#39;id&#39;, width:100}">ID</th>
<th lay-data="{fixed: &#39;right&#39;, width:150, align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}"></th>

以下はツールバーに対応するテンプレートで、ページ上のどこにでも保存できます:

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
  
  <!-- 这里同样支持 laytpl 语法，如： -->
  {{#  if(d.auth > 2){ }}
    <a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
  {{#  } }}
</script>
 
注意：属性 lay-event="" 是模板的关键所在，值可随意定义。

次に、テーブルモジュールのツールバーイベントを使用して、さまざまな操作機能を実行します。

//监听工具条
table.on(&#39;tool(test)&#39;, function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值
  var tr = obj.tr; //获得当前行 tr 的DOM对象
 
  if(layEvent === &#39;detail&#39;){ //查看
    //do somehing
  } else if(layEvent === &#39;del&#39;){ //删除
    layer.confirm(&#39;真的删除行么&#39;, function(index){
      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
      layer.close(index);
      //向服务端发送删除指令
    });
  } else if(layEvent === &#39;edit&#39;){ //编辑
    //do something
    
    //同步更新缓存对应的值
    obj.update({
      username: &#39;123&#39;
      ,title: &#39;xxx&#39;
    });
  }
});

layui 関連の知識については、layui フレームワークに注目してください。

以上がLauiuiのテーブルモジュールでの基本的なパラメータの適用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。