JavaScript BootStrap Table のバックグラウンドデータバインディング、特殊な列処理、ソート関数の詳細な説明-jsチュートリアル-php.cn

JavaScript BootStrap Table のバックグラウンドデータバインディング、特殊な列処理、ソート関数の詳細な説明

黄舟

リリース： 2017-05-28 10:29:35

オリジナル

2263 人が閲覧しました

このセクションでは、主にBootstrapのバックグラウンドデータバインディング、特殊な列処理および列ソート機能を紹介します。コードはシンプルで理解しやすく、非常に優れており、必要な友人は参照できます

。

このセクションでは主に Bootstrap のバックグラウンドデータバインディング、特殊な列処理、列ソート関数を紹介します

1. データバインディング

通常はプログラミングを行い、json ファイルを使用してデータを直接バインドすることはほとんどありません。基本的にはプログラミング言語を使用してデータを取得し、データバインディングを行います。

テーブルを配置コントロール

<table id="table" ></table>

ログイン後にコピー

javascript

<script >
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;tablejson.jsp&#39;,  //数据绑定，后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:&#39;400&#39;,
  columns: [
  {
    field: &#39;Id&#39;,
    title: &#39;中文&#39;
  }, {
    field: &#39;Name&#39;,
    title: &#39;Name&#39;
  }
  , {
    field: &#39;Desc&#39;,
    title: &#39;Desc&#39;
  }
  ],
});

ログイン後にコピー

のコードを呼び出す

2. 特別な列処理

実際のアプリケーションでは、操作列などの特別な列を追加する必要があります。次の js コードは特別な列を追加します

{
    field: &#39;#&#39;,
    title: &#39;control&#39;,formatter:function(value,row,index){
    var del=&#39;<a href="Delete!delete.action?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >删除</a>&#39;;
    var updt=&#39;<a href="supdate.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >修改</a>&#39;;
    var add=&#39;<a href="Include.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >增加</a>&#39;
    return del+" "+updt+"&nbsp"+add;
    }
  }

ログイン後にコピー

js コードは

著者別の最新記事

独自の PHP フレームワークをゼロから構築するためのビデオ資料

2023-03-15 16:54:01

PHPMailer が QQ メールボックスを使用して電子メール送信機能を完了する方法の分析例

2023-03-15 12:26:02

PHPでIMAPでメールを受信する方法の紹介

2023-03-14 18:58:01

PHP で配列の重複排除を迅速に実装する方法の例

2023-03-14 11:30:01

HTML でのタグのすべての属性の使用の概要

1970-01-01 08:00:00

PHPの基礎知識まとめ（初心者が始めるのに必要）

2023-03-16 15:20:01

JavaScript での typeof の使用の概要

1970-01-01 08:00:00

JavaScript でのconfirm() メソッドの使用の概要

1970-01-01 08:00:00

HTML5 プレースホルダー属性の詳細な紹介

1970-01-01 08:00:00

ReactJS のフォームに単一選択、複数選択、逆選択を実装する方法

1970-01-01 08:00:00

最新の問題

Bootstrap Vue チェックボックス <b-table> <b-form-checkbox> b-table で b-form-checkbox を使用しようとしています。選択したモジュール ID を取得してみます。 <b-tableid="module-t...

から 2024-03-31 18:36:11

0

1

389

関連トピック
詳細>

配列の長さを取得するjsメソッド

 jsで現在のページを更新する

 jsの丸め

 ノードを削除するjsメソッド

 JavaScript エスケープ文字

 jsで乱数を生成する方法

 JavaScriptを有効にする方法

 JSのSymbolクラスの詳細説明