はじめに:
layui は、あらゆるレベルのプロのフロントエンド開発者によって作成された、敷居の低い、すぐに使えるフロントエンド UI ソリューションです。フロントエンドとバックエンドの開発者。
layui のテーブル モジュールは主な焦点であり、基本パラメータの点で可能な限り使いやすくなっており、過度に複雑な構成を避けながら機能の前提条件を確保しています。基本的なパラメーターは通常、次のシナリオで使用されます:
场景一：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… </table>
场景二：下述方法中的键值即为基础参数项
table.render({
height: 300
,url: '/api/data'
});
更多场景：下述options即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
tableObj.reload(options); //重载表格次に、基本的な要素とは何かを見てみましょう。
1. elem - バインディング要素は元のテーブル コンテナを指定しますが、これは table.render() のレンダリング メソッドにのみ適用されます
HTML：
<table id="test"></table>
JS：
table.render({ //其它参数在此省略
elem: '#test' //或 elem: document.getElementById('test') 等
});2. テーブル ヘッダーを設定します。値。これは 2 次元配列です。テーブルの「メソッドレベルのレンダリング」を使用する場合は、このパラメータを使用してテーブルを設定する必要があります。例:
JS：
table.render({
cols: [[ //标题栏
{checkbox: true}
,{field: 'id', title: 'ID', width: 80}
,{field: 'username', title: '用户名', width: 120}
]]
});
它等价于：
<table class="layui-table" lay-data="{基础参数}" lay-filter="test">
<thead>
<tr>
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'username', width:180}">用户名</th>
</tr>
</thead>
</table>次に、セカンダリ ヘッダーの例を示します:
JS：
table.render({
cols: [[ //标题栏
{field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数
,{field: 'amount', title: '金额', width: 80, rowspan: 2}
,{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width
], [
{field: 'province', title: '省', width: 80}
,{field: 'city', title: '市', width: 120}
,{field: 'county', title: '详细', width: 300}
]]
});
它等价于：
<table class="layui-table" lay-data="{基础参数}">
<thead>
<tr>
<th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
<th lay-data="{align:'center'}" colspan="3">地址</th>
</tr>
<tr>
<th lay-data="{field:'province', width:80}">省</th>
<th lay-data="{field:'city', width:120}">市</th>
<th lay-data="{field:'county', width:300}">详细</th>
</tr>
</thead>
</table>テーブル モジュールは Infinitus ヘッダーをサポートしており、上記の方法で拡張を続けることができることに注意してください。核心は 2 つのパラメータ rowspan とcolspan にあります
次のステップは、ヘッダー
<1> フィールドにいくつかのパラメータを設定することです: フィールド名を設定します
table.render({
cols: [[
{field: 'id'} //其它参数在此省略
,{field: 'username'}
]]
});
等价于：
<th lay-data="{field:'id'}"></th>
<th lay-data="{field:'username'}"></th>< ;2> title: タイトル名を設定します
table.render({
cols: [[
{title: '邮箱'} //其它参数在此省略
,{title: '签名'}
]]
});
等价于：
<th lay-data="{}">邮箱</th> （PS：也可以把标题写在lay-data里面，即 title:'邮箱'）
<th lay-data="{}">签名</th><3> width: 列の幅を設定します。通常、列幅の設定が必要です (チェックボックス列、ツールバーなどの「特別な列」を除く)。これはテーブル全体の美しさに関係します。
table.render({
cols: [[
{width: 80} //其它参数在此省略
,{width: 120}
]]
});
等价于：
<th lay-data="{width:80}"></th>
<th lay-data="{width:120}"></th><4> チェックボックス: チェックボックスを設定します。 true に設定すると、この列の内容がチェック ボックスであることを意味し、通常は最初の列に配置されます。
table.render({
cols: [[
{checkbox: true} //其它参数在此省略
,{field: 'id', title:'ID', width: 100}
]]
});
等价于：
<th lay-data="{checkbox:true}"></th>
<th lay-data="{field:'id', width:100}">ID</th>ここでの LAY_CHECKED はチェックボックスと組み合わせて使用されることにも注意してください。true に設定すると、すべてのチェックボックスがデフォルトで選択されることを意味します。
table.render({
cols: [[
{checkbox: true, LAY_CHECKED: true} //其它参数在此省略
,{field: 'id', title:'ID', width: 100}
]]
});
等价于：
<th lay-data="{checkbox:true, LAY_CHECKED: true}"></th>
<th lay-data="{field:'id', width:100}">ID</th><5> space: ギャップ列を設定します。 true に設定すると、コンテンツのない幅 15 ピクセルの列が定義されます。
table.render({
cols: [[ //其它参数在此省略
{space: true}
,{field: 'id', title:'ID', width: 100}
]]
});
等价于：
<th lay-data="{space:true}"></th>
<th lay-data="{field:'id', width:100}">ID</th><6> sort: 並べ替えが必要かどうか。 true に設定すると、対応するテーブル ヘッダーに並べ替えアイコンが表示され、列の並べ替え機能が有効になります。
注: 値が存在する列 (数値と通常の文字) の並べ替えを有効にすることはお勧めできません。辞書式比較が発生するためです。例: 'Xianxin' > '2' > '100' ご希望の結果ではないかもしれませんが、辞書のソートアルゴリズム (ASCII コード比較) は次のようになります。詳細については辞書についても学ぶことができます。順序の知識。
table.render({
cols: [[
{sort:true} //其它参数在此省略
,{field:'id', title:'ID', width:100}
]]
});
等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:'id', width:100}">ID</th><7> 固定: 固定列が必要かどうか。 true または 'right' が設定されている場合、対応する列は左側または右側に固定され、スクロール バーと一緒にスクロールしません。
table.render({
cols: [[
{fixed:true} //其它参数在此省略
,{field:'id', title:'ID', width:100}
,{field:'username', title:'姓名', width:120, fixed:'right'} //固定列在右
]]
});
等价于：
<th lay-data="{sort:true}"></th>
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{field:'username', width:120, fixed:'right'}">姓名</th><8> edit: 編集を許可するかどうか。 true に設定すると、対応する列のセルの編集が許可されます。現在、type="text" の入力編集のみがサポートされています。
table.render({
cols: [[
{edit:'text'} //其它参数在此省略
,{field:'id', title:'ID', width:100}
]]
});
等价于：
<th lay-data="{edit:'text'}"></th>
<th lay-data="{field:'id', width:100}">ID</th><9> テンプレット: カスタム テンプレート。デフォルトでは、セルの内容はデータ インターフェイスから返されたとおりに出力されます。特定の列のセルにリンクやその他の要素を追加したい場合は、このパラメータを使用すると簡単に追加できます。これは非常に実用的な機能であり、テーブルの内容が豊富で多様になります。
table.render({
cols: [[
{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器
,{field:'id', title:'ID', width:100}
]]
});
等价于：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>実際、テンプレットは、次のように HTML コンテンツの一部であることもできます:
templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'
注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板<10> ツールバー: バインド ツールバー。通常、テーブルの各行に表示、編集、削除などの同様の操作ボタンを追加する必要がありますが、そのためにツールパラメータが誕生するため、さまざまな操作機能を非常に便利に実装できます。ツール パラメータはテンプレット パラメータとまったく同じ方法で使用され、通常はセレクタまたは HTML 文字の段落を受け入れます。
table.render({
cols: [[
{field:'id', title:'ID', width:100}
,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
]]
});
等价于：
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></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('tool(test)', 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 === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
}
});関連する推奨事項: layui
以上がLauiuiのテーブルモジュールで基本パラメータを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
