Lauiuiでテーブルデータを取得する方法-ライユイのチュートリアル-php.cn

Lauiuiでテーブルデータを取得する方法

王林

リリース： 2020-11-30 10:01:48

オリジナル

16149 人が閲覧しました

layui でテーブルデータを取得する方法: 1. js オブジェクト配列を作成し、元のデータをテーブルに保存します; 2. [table.render()] の data パラメーターをオブジェクト配列に代入します; 3. tableContent のデータを取得するだけです。

Lauiuiでテーブルデータを取得する方法
このチュートリアルの動作環境: Windows 10 システム、layui バージョン 2.5.6. この方法は、すべてのブランドのコンピューターに適しています。

アイデア:

1. 適切なスコープを持つ JS オブジェクト配列を作成し、元のデータをデータテーブルに保存します。

2. 前の手順で作成した元データである JS オブジェクト配列を table.render() の data パラメーターに代入します。

3. テーブル内のすべてのデータを取得するには、最初の手順で作成した JS オブジェクト配列を直接取得できます。次のコードを参照して、テーブル内のすべてのデータを取得するには、データを取得します。 tableContent 内。

コード実装:

// 存放数据表格中的数据的对象数组tableContent
var tableContent = new Array();

table.render({
 elem : &#39;#viewTable&#39;,
 height : 325,
 even: true,
 text: {
 none: &#39;您没有选中任何字段！&#39;
 },
 // 拿对象数组tableContent中的数据作为原始数据渲染数据表格
 data : tableContent, 
 page : {
 layout: [&#39;count&#39;, &#39;prev&#39;, &#39;page&#39;, &#39;next&#39;, &#39;limit&#39;, &#39;skip&#39;]
 },
 limit : 5,
 limits : [5, 10, 15, 20, 25],
 cellMinWidth: 80,
 cols:[[
 {type:&#39;checkbox&#39;,fiexd : &#39;left&#39;},
 {title : &#39;序号&#39;,type:&#39;numbers&#39;},
 {field : &#39;column&#39;,title : &#39;列&#39;,align:&#39;center&#39;},
 {field : &#39;alias&#39;,title : &#39;别名&#39;,align:&#39;center&#39;,edit : &#39;text&#39;},
 {title : &#39;操作&#39;,fiexd : &#39;right&#39;,align:&#39;center&#39;, toolbar: &#39;#viewBar&#39;}
 ]],
 done : function(res, curr, count){
 // do something...
 }
});

ログイン後にコピー

データテーブル内のデータは、非同期リクエストを通じて取得されます。

これは、table.render() の Done パラメーターを通じて直接取得できます。パラメーターの値は、データがレンダリングされた後のコールバックです。直接割り当てであっても、データの非同期リクエストであっても、レンダリングの完了後にコールバックがトリガーされます。注: レイテーブルの元データに直接代入する方法を使用する場合、この方法ではテーブル内のすべてのデータではなく、データテーブル内の現在のページのデータが取得されます。テーブル内のすべてのデータを取得したい場合は、上記の「データテーブルのデータは「直接割り当て」方式です

table.render({ //其它参数在此省略
 done: function(res, curr, count){
 //如果是异步请求数据方式，res即为你接口返回的信息。
 //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
 console.log(res);
 //得到当前页码
 console.log(curr);
 //得到数据总量
 console.log(count);
 }
});

ログイン後にコピー