表ツール ボタンは、さらに多くの列が表示されているときに表イベントをトリガーすることもできます。

まず、誰もが遭遇した可能性のある問題のレンダリングを見てみましょう:

つまり、ツールバーの幅が設定されていない場合、圧力が小さかったり、幅の設定が不十分だったりすると、コンテンツのように表示されます...その後、表示ドロップダウン アイコンをクリックすると、より多くのコンテンツが表示されますが、コンテンツとは異なります。通常のtdの場合、ボタンが表示されます。

しかし、クリックしても最初に追加されたツール監視をトリガーすることはできません。これは恥ずかしいことです。列幅を手動でドラッグして他のボタンを表示してからクリックするか、最初に十分な幅を設定する必要があります。幅、しかし、中にあるボタンの数が不明な場合、長さが不明な場合、または非常にたくさんある場合にも問題が発生します。

つまり、ユーザーにコンテンツではなくボタンを主に見てもらうことは実際には不可能です。そのため、それを現実的にする方法はありますか?その後、クリックしてさらに表示し、クリックしたときに元のイベントをトリガーします? ?

この方法は単なるアイデアです。方法はたくさんあると思います。ここでは私の方法を共有します。2 つのイベント デリゲートを使用してそれを実現します。

基本的なコードは次のとおりです:

アイデア分析:

まず、このドロップダウン アイコンにマウスダウン イベントを追加して、現在の表示をさらにデータを記録します。 . どのテーブルのどの tr とどの td か。次に、それを table._tableTrCurr の下に記録します。

一部の学生は、なぜクリックを直接使用しないのかについて質問するかもしれません。これは、イベントの委任もテーブル内で作成されますが、それはドキュメントではなくテーブルの本体に委任されるためです。言い換えれば、実際にドキュメントの外部にデリゲートを書き込むことになります。

モニターをクリックすると、テーブルロジックに到達すると停止します。モニターに入らないので、マウスダウンで回避します。モバイルの場合は問題ありませんか?これは主に Web 側で自分で試すことができます。

次に、別のモニターがあり、開かれたヒントの「ボタン」のクリックを監視し、記録されたばかりの _tableTrCurr 情報を見つけて、必要なテーブルの tr と td を見つけます。見つけてしまえば扱いは簡単で、クリックするだけで table.on('tool') に書かれた内容がトリガーされます。

効果:

注: この修正は最新バージョン (v2.4.5) に基づいています. 重要なポイントの 1 つはフォームを取得することです。 id、この ID は単にテーブル ノードの ID ではなく、レンダリング後のインスタンスの ID です。

未設定の場合はデフォルトでテーブルのノードのIDになります、未設定の場合はテーブル内にインデックス等がテーブルのIDとして生成されます。 2.4.4 の更新は、誰もが気づきにくいかもしれませんが、非常に重要な変更は、現在のテーブル インスタンスの ID を保存するために、lay-id 属性をテーブルのビューに追加することです。

これは非常に、非常に、非常に使いやすい変更であり、非常に重要です。後で特定のテーブルをリロードしたい場合は、どのノードをリロードしているかがわかっていれば、自然に、リロードしたい tableId を見つけることができます。したがって、まだ 2.4.0 ～ 2.4.3 を使用している場合は、2.4.4 にアップグレードすることを強くお勧めします。

もちろん、私の tablePlug プラグインを使用する場合は、処理を tablePlug 内で行っているため、実際にはこの問題を心配する必要はありません。レンダリング後に追加され、2.4.4と同じ効果が得られます。

テスト ページ: https://sun_zoro.gitee.io/layuitableplug/testTableReload.html
gitee プロジェクト: https://gitee.com/sun_zoro/layuiTablePlug

実装コードは次のとおりです:

  //缓存当前操作的是哪个表格的哪个tr的哪个td
    $(document).off('mousedown','.layui-table-grid-down').on('mousedown','.layui-table-grid-down',function (event) {
        //直接记录td的jquery对象
        table._tableTrCurrr = $(this).closest('td');
    });

    //给弹出的详情里面的按钮添加监听级联的触发原始table的按钮的点击事件
    $(document).off('click','.layui-table-tips-main [lay-event]').on('click','.layui-table-tips-main [lay-event]',function (event) {
        var elem = $(this);
        var tableTrCurrr =  table._tableTrCurrr;
        if(!tableTrCurrr){
            return;
        }
        var layerIndex = elem.closest('.layui-table-tips').attr('times');
        layer.close(layerIndex);
        table._tableTrCurrr.find('[lay-event="' + elem.attr('lay-event') + '"]').first().click();
    });

推奨: layui チュートリアル

以上が表ツール ボタンは、さらに多くの列が表示されているときに表イベントをトリガーすることもできます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。