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 フォームのネストされたテーブルと各行の検証の詳細な説明

推薦する

モバイルでのHTML5経由のファイルアップロード

ほとんどの場合、PC でファイルをアップロードするにはプラグインが使用され、フラッシュが導入されても...

Vue はネストされたルーティングメソッドの例を実装します

1. ネストされたルーティングはサブルーティングとも呼ばれます。実際のアプリケーションでは、通常、ネ...

CentOS7にsshをインストールして設定する

1. openssh-serverをインストールする yum インストール -y openssl o...

Linux でのログ サーバーの設定に関するグラフィック チュートリアル

序文この記事では、Linux 構成ログ サーバーに関する関連コンテンツを主に紹介し、参考と学習のため...

Vue の foreach 配列と js の traversal 配列の書き方の説明

Vue foreach配列を記述し、jsで配列をトラバースする方法シナリオVueでAxiosを使用し...

Visual Studio Code + Reactをベースに開発環境を構築するプロセス

開発環境ウィンドウ開発ツール Visual Studio Codeノードのインストールとnpm Wi...

さまざまなReact状態マネージャーの解釈と使用方法

まず、状態マネージャーとは何か、そしてそれが何をするのかを知る必要があります。複数のページで同じプロ...

Vue ElementUI は非同期読み込みツリーを実装します

この記事の例では、vue ElementUI の非同期読み込みツリーを実装するための具体的なコードを...

JS配列の組み込みトラバーサルメソッドとその違いについての簡単な説明

目次forEach() (ES6) メソッドmap() (ES6) メソッドflatMap() メソ...

Docker を使用した war パッケージ プロジェクトのデプロイの実装

Docker で war をデプロイするには、コンテナを使用する必要があります。ここでは tomca...

子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...

docker を使用して Linux 環境に Springboot パッケージをデプロイするチュートリアル

springboot には tomcat サーバーが組み込まれているため、jar パッケージにパッケ...

TypeScript における型保護の詳細な説明

目次概要型アサーション構文ではインスタンスオブ構文typeof構文要約する概要TypeScript ...

Nginx プロキシ axios リクエストと注意事項

序文最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイス...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...