Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。

Layuiテーブルは指定された行のラジオボタンを選択し、その行の実装コードまでスクロールします。

layui テーブルには複数行のデータがあります。外部入力コンテンツを通じて、指定された行を見つけ、変更する行を選択し、行に対して操作を実行する必要があります。

結果:

HTMLコード:

<本文>
      <div class="layui-fluid">
         <input type="text" id="txt_id" />
          <table class="layui-hide" id="test" lay-filter="test"></table>
          <script type="text/html" id="toolbarDemo">
              <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-sm" lay-event="getCheckData">選択した行データを取得します</button>
                 <button class="layui-btn layui-btn-sm" lay-event="SetChecked">選択した行を設定します</button>
             </div>
         </スクリプト>
  
     </div>
     <script src="lib/jquery-1.9.1.min.js"></script>
     <script src="layui/layui.all.js"></script>
     <script src="lib/AjaxCommon.js"></script>
     <スクリプト>
         layui.use('テーブル'、関数() {
             : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

背景コード:

 パブリッククラス LayUITableEntity
  { 
   公開文字列コード
  { 
  得る; 
  セット; 
  }
  公開文字列メッセージ
  { 
  得る; 
  セット; 
  } 
   公開文字列カウント 
   {
   得る; 
   セット;
   } 
    パブリックオブジェクトデータ 
    { 
    得る;
    セット;
    } 
    }
    パブリッククラス TestEntity 
    {
   /// <要約>
  /// このフィールドはラジオが選択されているかどうかを示すために使用されます。 /// </summary>
   パブリックブール LAY_CHECKED 
    { 
    取得する; 設定する;
    } 
    = 偽; 
    パブリック文字列ID
    {
    得る;
    セット; 
    } 
    パブリック文字列名
    { 
    取得する; 設定する;
    } 
    }
    [ルート("/api/test")]
    パブリック クラス TestController: ServiceController
    { 
    [RouteHttpGet("こんにちは")] 
    パブリックFormiumResponse HelloNanUI(FormiumRequest リクエスト) 
    { 
     リスト<TestEntity> teList = 新しいリスト<TestEntity>(); 
     (int i = 1; i <= 30; i++) の場合 
    {
   TestEntity te = 新しい TestEntity() 
    { 
     //初回読み込み時に、ID 3 のレイヤーが選択されます LAY_CHECKED = i == 3 ? true : false,
     Id = i.ToString()、
     名前 = "名前" + i.ToString() 32 
    }; 
    teList.Add(te);
    } 
 LayUITableEntity layUITableEntity = 新しい LayUITableEntity() 
    {
    コード = "0"、
    カウント = teList.Count().ToString(),
    メッセージ = "", 
    データ = teList
    }; 
    Json(layUITableEntity) を返します。 
    } 
    }

Layuiテーブルの指定行のラジオボタンを選択し、その行までスクロールする実装コードについてはこれで終了です。Layuiテーブルのラジオボタン選択スクロールに関するより関連性の高いコンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<:  フロントエンドブラウザのフォントサイズが12px未満のソリューション

>>:  Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

推薦する

WeChatアプレットはキャンバスを使用して時計を描画します

この記事では、キャンバスを使用してWeChatアプレットに時計を描く具体的なコードを参考までに共有し...

CSS における z-index: 0 と z-index: auto の違い

最近、スタック コンテキストについて学習しています。学習の過程で、z-index が 0 の場合と ...

シングルサインオン制御を実装するためのVueの完全なコード

参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...

Ubuntu のインストール グラフィック ドライバーと Cuda チュートリアル

目次1. 元のドライバーをアンインストールする2. 新しいグラフィックカードドライバーをダウンロード...

CSS フォント、テキスト、リストのプロパティの詳細な紹介

1. フォントのプロパティcolorは、div{color:red;}のようにテキストの色を指定しま...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

MySQL の current_timestamp の落とし穴とその解決策を共有する

目次MySQL の current_timestamp の落とし穴エラーを報告する私の解決策mysq...

ネイティブ JS でスネーク ゲームを書く

この記事では、参考までに、JSでスネークゲームを書くための具体的なコードを紹介します。具体的な内容は...

水平プログレスバーの最後にテキストを表示するための実装コードの CSS 記述

問題の説明仕事で以下の成果を達成したいと考えています。 解決div タグに相対配置を追加し、絶対配置...

MySQL でのストアド プロシージャと関数の作成の詳細な説明

目次1. ストアドプロシージャ1.1. 基本構文1.2 実行権限を指定してストアドプロシージャを作成...

HTMLのインライン要素とブロックレベル要素とは何か、またそれらの違いは何ですか

以前の就職面接で面接官が尋ねた質問を覚えています。「インライン要素とは何ですか。ブロックレベル要素と...

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

CSSをインポートする方法に関する詳細な洞察の要約

CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンド...

cobbler ベースの Linux システムを自動的にインストールする

1. コンポーネントをインストールする yum install epel-rpm-macros.no...

CSS ブラウザ互換性の問題に対する 4 つの解決策

フロントエンドは、技術が急速に進化するだけでなく、知っておくべき事柄が多すぎるという理由で大変な仕事...