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