Bootstrapのネイティブテーブルコンポーネントは、単純なデータ表示のみを満たすことができ、より多くの運用要件を満たすことができません。もちろん、「Datatables-1.10.11」と呼ばれるブートストラップベースのテーブルコンポーネントを見つけることができますが、APIについてあまり知らない場合は、使用するのが苦痛です。ただし、JQGridを使用することを選択した場合、このチュートリアルはこの運用テーブルのソリューションを提供します。
1。エフェクトディスプレイ
わかりました、この写真を見せてください。 JQGridのブートストラップバージョンに恋をしたと思います。それはブートストラップと非常に互換性があり、単に完璧です。もちろん、これには理由のJQGridにいくつかの変更が必要であり、コンポーネントをカプセル化する必要があります。
2。リソースのダウンロード
とにかく、私は共有が大好きです。 JQGridの公式WebサイトからJQGridのコンポーネントコードをダウンロードできますが、ダウンロード後にいくつかの変更が必要です。次に、変更されたJQGridをGITに直接アップロードすると、提供されたファイルを対応するプロジェクトにインポートするだけです。
さらに、 jquery-ui-1.10.0.custom.cssをダウンロードする必要がありますが、ダウンロードアドレスは提供しませんが、間違いなく見つけると思います。頻繁に事故があるBaiduの女の子を使用していても、それを見つけることができます。
3。この記事は何ですか
QQグループを作成して以来、一部の学生は「絶え間ないストリーム」でグループに参加しましたが、グループの最初のステップがデモまたはプロジェクトコードを求めるために私のところに来たこともわかりました。私はこれが好きではありません。自分でやり、以下を実装して変換してください。そうすれば、自分のものになります。明らかに、私のコードを完全にコピーすることからそれ以上の助けが得られないでしょう。上記の学生が勉強しているときにイニシアチブをとることを願っています。
上記の小さなナンセンスを言った後、私たちのブログが主に話していることと、BootstrapにJQGridを埋め込むための鍵は何であるかについて、ポイントに戻って話しましょう。次のように要約します。
ブートストラップのJQGridレイアウトスキームJQGRID独自の建設的なパラメーターJQGridのモジュラーJQGridデータ操作Bootstrap
説明するために上記の部分に暫定的に分割されていますが、スペースの制限により、ブログにはアイデアと一部のコードのみが提供されていることに注意する必要があります。
①。ブートストラップのJQGridのレイアウト計画
< file = "/components/common/csslib.jsp"％> <head> <link type = "text/css" rel = "styleSheet" href = "href =" $ {ctx} /css/deal/my_pay_list.css "/>> </head> <body> <form =" jqgridform "" " action = "$ {ctx}/deal/data databulePayDealOrderSlist" Method = "post"> <div> <div> <label for = "name">プロジェクト名：</label> <div> <入力タイプ= "テキスト" name = "name" id = "name" placeholder = "Project name" value = "" id = "searchbtn"> search </button> </div> </div> <div> <div> <table id = "pagegrid" rel = "jqgridform"> </table> <div id = "pagegridpager"> </div> </form> </div> <％@ inter file = "/componts/common/jslib.jsp" " src = "$ {ctx} /js/deal/my_pay_list.js"> </script> </body> </html>一人一人のプロジェクトは大きく異なります。リストされているコードでは、JQGridセクションのみに焦点を当てます。
id="jqgridForm" 、ここには、jqgridの検索条件の層、つまりレンダリングにリストされている検索パーツを備えた形式の形式があります。検索ボタンをクリックすると、フォームフォームフィールドのクエリ条件がコントローラーに送信され、取得されたデータが取得されます。 id="searchBtn"は、Modularityで後で使用される検索ボタンを定義します。 <table id="pageGrid" rel="jqgridForm"></table> <div id="pageGridPager"></div> jqgridのテーブル要素とjqgridのフッター要素を定義します。私のプロジェクトで使用されているルールは、一時的にこのルールに同意します。また、独自のルールを作成することもできます。 RELでフォームのIDを指定することにより、テーブル検索フォームを使用する方が簡単です。 ②、JQGrid独自の建設的なパラメーター
パラメーターを構築すると、①のmy_pay_list.jsにそれらを抽出しました。
$（function（）{var jqoption = {datAtype： "xml"、mtype： "post"、shrinktofit：true、view records：false、rownumbers：false、autowidth：true、height： "100％"、colnames：['id'、 'anubor' '' project '' sport '' sport '' sporty '' sporty '' sporty '' sports '' project '' fation数量 '、' order status '、' operation ']、colmodel：[{name：' id '、index：' id '、hidden：true}、{name：' status '、index：' status '、hidden'、{name： 'image_str'、index： 'image_str'、width：140、resizable：fals fals、fals、falter、falter、fals、falth、falth、fals、fals、fals options： '総支払いコスト：'）{return cellvalue; $（rowobject）.find（ "id"）。 '/deal/showdealor/' + id + '">詳細を表示</a>';} if（status == 2）{return '<a target =" ajaxtodo "href ="' + common.ctx + '/deal/receivder/' + id + '> ：「マップ」、ページ： 'page'、合計： '合計'、レコード： 'レコード'、id： 'id'}、rownum：50、rowlist：[50、100、200、300]、apager： "#pagegridpager"、footerrow：true、loaderror：yunm.ajaxerror、gridcomplete（） $（ "＃pagegrid"）。 Image_Str： "、Order_price：json.message}、yunm.ajaxerror}）; $（[ターゲット=ダイアログ]、$（ "＃pagegrid"）。JQGridに精通していない学生は、JQGridのデモとJQGridの公式文書を最初に読むことをお勧めします。もちろん、JQGridにすでに精通している学生にとって、DocとDemoは間違いなく必見です。
上記のファイルにリストされている多くの属性があります。 JQGridをあまり紹介しません。この記事の主なテーマは、JQGridをBootstrapに埋め込む方法を紹介することです。重要なポイントは、JQGridを導入しないことです。いくつかの重要なポイントを紹介します。
formatter: function(cellvalue, options, rowObject) { 、フォーマッタはまだ非常に頻繁に使用されるため、対応するセルの値を取得することが非常に重要です。私のjqgridはXML（datatype： "xml"）データ形式を使用するため、 $(rowObject).find("deal_id").text()を介して対応するdeal_id列の値を見つけることができます。 xmlReader : { repeatitems : false, root : "PageGrid", xmlreaderのパラメーター値に注意してください。次の紹介では、JQGRIDのデータ操作が詳細に導入されます。これは、バックグラウンドXMLデータカプセル化に関連しています。 $("#pageGrid").footerData("set", {image_str : "支付总花费：", order_price : json.message}); 、FooterDataメソッドに関しては、使用するのも非常に便利であり、効果を効果として参照できます。 initEnv(jqOption);方法。ページがオンロードされた後、jqgridの初期化パラメーターをinitenvメソッドに渡します。 BootstrapでのJQGridのその後のモジュール化では、inteNVメソッドを紹介します。 BootstrapのJQGridモジュール性
②では、inteNVメソッドに気づいたため、この方法はJQGrid専用のモジュラーカプセル化作業で構築されています。
inteenvメソッド
function initenv（jqoption）{$（window）.resize（function（）{initlayout（）;}）; initui（null、jqoption）;}この方法では、initlayoutメソッドとinitUIメソッドが表示され、特定のコンテンツが後で導入されます。
initlayout
function initlayout（）{$（ "table [rel = jqgridform]" "））つまり、ウィンドウがスケーリングされると、jqgridの幅を再描画して、ブートストラップのレスポンシブレイアウトに適応します。使用される方法は、JQGridのSetGridWidthメソッドです。
initui
関数initui（_box、jqoption）{var $ p = $（_ box || document）; if（jqoption）{yunm.debug（ "initializejqgrid"）; var $ form = $（ "＃" + $（ "＃pagegrid"）。attr（ "rel"））; yunm.debug（yunm.array2obj（$ form.serializearray（）））; // var op = $ .extend（{url：$ form.attr（ "action"）、postdata：yunm.array2obj（$ form.serializearray（））、}、jqoption）; $（ "＃pagegrid"）。jqgrid（op）; //検索ボタン$（ "＃searchbtn"、$ form）.click（function（）{$（ "＃pagegrid"）。jqgrid（ 'setgridparam'、{url：$ form.attr（ "action"）、page：1、postdata：yunm.array2obj（$ form.serializearray（）、}）; $（ "＃pagegrid"）。トリガー（ "reloadgrid"）; //ツールバー、ボタンの丸い角を削除します$（ "。btn"、$ form）.each（function（）{var $ this = $（this）; $ this.css（{"border-radius"： "0px"、 "borderbottom"： "0"、}）;}）; }} array2obj：function（array）{var params = $（{}）; $ .each（array、function（i）{var $ param = $（this）[0]; params.attr（$ param.name、$ param.value）;}）; params [0];}を返す、私の以前の一連の記事を読んだことがあれば、InitUIメソッドにあまり慣れ親しんでいないでしょう。 DWZに精通している友人は、当然それに不慣れではありません。私のプロジェクトのテンプレートのほとんどは、まだDWZに依存しています。これらの先輩に感謝します。
var $form = $("#" + $("#pageGrid").attr("rel")); jqgridのフォームフォーム条件を関連付けるため、ここでフォームフォームオブジェクトを取得できます。フォームフォームオブジェクトを取得すると、検索フィールド（ $form.serializeArray() ）の値を自然に取得します。フォームフォームの検索フィールド値を取得したら、現時点で処理を行う必要があります。 JQGRIDがパラメーターをコントローラーに渡すと、ページングとソートされた関連フィールド（ページ、行、SORD、SIDX）を送信する必要があることがわかります。使用される方法は$("#pageGrid").jqGrid({postData:xxx});通常、フォームフォームを送信する場合、 $form.serializeArray()を使用する必要がありますが、この時点でxxxを$form.serializeArray()に置き換えるだけで、ページとソートされた関連フィールド（ページ、行、ソード、SIDX）はコントローラーで取得されません。これは対立です。現時点でそれに対処する方法は？解決策は、フォームフォームデータ（array2objメソッド）を客観化することです。その後、検索フィールドの値をvar op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op);を介してコントローラーにページングとソートの関連フィールドとともに送信します。 var op =$.extend({url:$form.attr("action"),postData:YUNM.array2obj($form.serializeArray()),},jqOption);$("#pageGrid").jqGrid(op); $("#searchBtn", $form).click jqgridのデータをクリックイベントをカプセル化してリロードします。 $(".btn", $form).each(function() {ここのメソッドはボタンを取得してコーナーを削除してjqgridに適しています。レンダリングを参照してください。
データ操作の部分には、検索パラメーターの合格、ページネーションソートパラメーターの合格、およびSQLステートメントの書き込みが含まれていると思います。
パラメーターの渡しに関して、フロントエンドパラメーターのカプセル化が③に導入されています。データがコントローラーでどのように処理されるかを見てみましょう。
まず、JQGridのXMLReaderのデータソースであるPageGridを定義しましょう。
パッケージcom.honzh.common.page; Import java.util.list; import com.thoughtworks.xstream.annotations.xstreamalias; @xstreamalias（ "pagegrid"）@suppresswarnings（ "rawtypes"）public class pagegrid {private int page;プライベートint合計;プライベートINTレコード。プライベートリストデータ。 public int getPage（）{return this.page; } public void setpage（int page）{this.page = page; } public int gettotal（）{return this.total; } public void settotal（int total）{this.total = total; } public int getRecords（）{return this.records; } public void setRecords（int records）{this.records = records; } public List getData（）{return this.data; } public void setData（リストデータ）{this.data = data; }}Xstream.jarはプロジェクトで必要です。自分でダウンロードします。
XStreamComponent.java
パッケージcom.honzh.common.page; Import org.apache.commons.lang.stringutils; import com.thoughtworks.xstream.xstream; import com.thoughtworks.xstream.converters.converter; import com.thoughtworks.xstream.io.xml.domdriver; Dom.thoughtworks.xtream.defult.defult.defult.defult.defult.xtream. com.thoughtworks.xstream.mapper.xstream11xmlfriendlymapper; public class XStreamComponent {private XStream XStream; public static xstreamComponent newInstance（）{XstreamComponent XMLComponent = new XStreamComponent（）; xmlcomponent.alias（new class [] {pagegrid.class}）; xmlComponentを返します。 } public xstreamComponent（）{this.xstream = new XStream（new domdriver（））; } public string toxml（object obj）{return this.xstream.toxml（obj）; } public string tagexml（object obj）{RegisterConverter（new MapCustomConverter（new DefaultMapper（Xstream11xmlfriendlyMapper.class.getClassLoader（）））; return toxml（obj）; } public Object fromPageXml（String XML）{RegisterConverter（new MapCustomConverter（new DefaultMapper（XStream11xmlfriendlyMapper.class.getClassoloder（）））; fromxml（xml）; } public object fromxml（string xml）{this.xstream.fromxml（xml）; } @suppresswarnings（ "rawTypes"）public void process Annotations（class type）{this.xstream.processannotations（type）; } @suppresswarnings（ "rawTypes"）public void process Annotations（class []型）{this.xstream.processannotations（types）; } @suppresswarnings（ "rawTypes"）public void alias（string name、class type）{this.xstream.alias（name、type）; } @suppresswarnings（ "rawTypes"）public void alias（class [] types）{for（class type：types）{string classname = type.getname（）; try {string [] classNames = stringutils.split（className、 "。"）; this.xstream.alias（classnames [（classnames.length -1）]、type）; } catch（Exception ex）{this.xstream.alias（classname、type）; }}} public void RegisterConverter（Converter Converter）{this.xstream.registerConverter（converter）; } @suppresswarnings（ "rawTypes"）public void useattributefor（class definedin、string fieldname）{this.xstream.useattributefor（definedin、fieldname）; }}PageGridは主にXMLオブジェクトとしてカプセル化され、フロントエンドに渡されます。
MapCustomConverter.java
パッケージcom.honzh.common.page; Import java.util.hashmap; import java.util.hashtable; import java.util.iterator; import java.util.map; import com.thoughtworks.xstream.converters.marshallingcontext com.thoughtworks.xstream.io.hierarchicalStreamReader; Import com.thoughtworks.xstream.io.hierarchicalstreamwriter; Import com.thoughtworks.xstream.mapper.mapper; public class mapcustomconverterは、抽象COLlectionConverterを拡張します。 } @suppresswarnings（ "rawTypes"）public boolean canconvert（class type）{return（type.equals（hashmap.class））|| （type.equals（hashtable.class））|| （type.getName（）。equals（ "java.util.linkedhashmap"））|| （type.getName（）。equals（ "sun.font.attributemap"））; } @suppresswarnings（{"rawTypes"}）public void Marshal（オブジェクトソース、階層ストリームライターライター、MarshallingContext Context）{Map Map =（Map）Source; for（iterator iterator = map.entryset（）。iterator（）; iterator.hasnext（）;）{map.entry entry =（map.entry）iterator.next（）; writer.startnode（entry.getKey（）== null？ "null"：entry.getKey（）。toString（））; writer.setValue（entry.getValue（）== null？ ""：entry.getValue（）。toString（））; writer.endnode（）; }} @suppresswarnings（ "rawTypes"）public object unmarshal（hierarchicalstreamreader reader、unmarshallingcontext context）{map map =（map）createcollection（context.getRequiredType（））; populatemap（読者、コンテキスト、マップ）;マップを返します。 } @suppresswarnings（{"rawTypes"、 "un -checked"}）保護されたvoid populatemap（hierarchicalstreamreader reader、unmarshallingcontextコンテキスト、マップマップ）{while（reader.hasmorechildren（））{reader.movedown（）; Object key = reader.getNodename（）; Object値= reader.getValue（）; map.put（key、value）; reader.moveup（）; }}}主に、データベースで取得されたハッシュマップを標準のXML形式データに変換します。
baseconditionvo.java
パッケージcom.honzh.common.persistence; import java.util.hashmap; import java.util.map; import org.apache.ibatis.session.Rowbounds;/** *パジネーションクエリ中にパラメーター設定クラス。 2.PageNum──The Page。 <br> * 3.numperpage─howはページが表示されますか？空の場合、page_show_countが表示されます。 <br> * 4.totalcount──total number。 TotalCount/numperpage =何ページ<br> * 5. Orderfield──sorted列。 <br> * 6. OrderDirection──ソートの方向。 * </p> */public class Baseconditionvo {public final static int page_show_count = 50; private int pagenum = 1; private int numperpage = 0;プライベートロングトータルカウント= 0; private string orderfield = ""; private string orderdirection = ""; /*** @Fields PS：パラメータータイプをカプセル化します。 */ private map <string、object> mo = new hashmap <string、object>（）; public int getPagenum（）{pagenumを返します。 } public void setPagenum（int pagenum）{this.pagenum = pagenum; } public int getNumperPage（）{return numperpage> 0？ numperpage：page_show_count; } public void setnumperpage（int numperpage）{this.numperpage = numperpage; } public string getOrderField（）{return orderfield; } public void setorderfield（String Orderfield）{this.orderfield = Orderfield; } public string getOrderDirection（）{return "desc" .equals（orderdirection）？ 「DESC」：「ASC」; } public void setOrderDirection（String OrderDirection）{this.OrderDirection = OrderDirection; } public long gettotalcount（）{return totalcount; } public void settoTotAlcount（long totalcount）{this.totalcount = totalcount; } public int getStartIndex（）{int pagenum = this.getPagenum（）> 0？ this.getPagenum（）-1：0; pagenum * this.getnumperpage（）; } public rowbounds createrowbounds（）{rowbounds ro = new rowbounds（this.getStartIndex（）、this.getNumperpage（））; ROを返します。 } / ** * @title：addparams * @description：クエリ条件を追加 * @param key * @param value * / public void addparams（string key、object value）{this.getmo（）。put（key、value）; } / ** * @title：getParams * @description：get query条件 * @param key * @return * / public object getParams（string key）{return this.getmo（）。get（key）; } / ** * @return the mo * / public map <string、object> getmo（）{return mo; } / ** * @param mo * mo to set * / public void setmo（map <string、object> mo）{this.mo = mo; } @Override public String toString（）{return "条件：" + pagenum + "、" + numperpage + "、" + totalcount + "、" + orderfield + "、" + orderdirection + "、" + mo; }}ページング、ソート、検索フィールドなど、ページネーションのクエリデータオブジェクト。
Protected BaseconditionVo getBaseConditionVofortable（）{baseconditionVo vo = new BaseConditionVo（）; //ページネーションパラメーターint currentPage = getParatoint（ "page"）; intサイズ= getParatoint（ "rows"）; string sortorord = getPara（ "sord"）;文字列sortcol = getPara（ "sidx"）; vo.setnumperpage（サイズ）; vo.setpagenum（currentPage）; vo.setorderfield（sortcol）; vo.setOrderDirection（SORTORDER）; voを返します。 } jqgridで渡されたパラメーターをBaseconditionvo Paginationクエリオブジェクトに変換します。保護されたvoid renderxml（httpservletresponse res、string xmlResponse）{try {res.setcharacterencoding（ "utf-8"）; res.setheader（ "content-type"、 "text/xml"）; printwriter out = res.getWriter（）; out.print（xmlResponse）; if（out！= null）{out.close（）; }} catch（ioexception e）{logger.error（e.getmessage（））; logger.error（e.getmessage（）、e）; }}出力ストリームにXMLを書き込みます。
これらの基本オブジェクトを定義した後、データの取得と渡され始めます。
@suppresswarnings（ "rawTypes"）@RequestMapping（value = "datablePayDealOrderSlist"）public void datapaydealorderSlist（httpservletResponse Response）{try {logger.debug（ "get the order i said"）; XStreamComponent XStreamComponent = XStreamComponent.NewInstance（）; // get list parameters baseconditionvo vo = getBaseConditionVofortable（）; vo.addparams（ "name"、getpara（ "name"））; logger.debug（ "注文クエリを支払いました" + vo）; //作成したプロジェクトMyDealOrders = dealOrderService.getByissueUid（vo、vo.createrowbounds（））; long count = dealorderservice.searchissuetotalcount（vo）; string xmlResponse = xstreamComponent.topagexml（createPageGrid（myDealOrders、vo、count.intvalue（）））; renderxml（response、xmlresponse.replaceall（ "__"、 "_"））; } catch（uncategorizedsqlexception e）{logger.error（e.getmessage（））; logger.error（e.getmessage（）、e）; renderxml（response、constants.query_error）; } catch（Exception e）{logger.error（e.getMessage（））; logger.error（e.getmessage（）、e）; renderxml（response、constants.server_error）; }}詳細に説明しましょう：
1。XStreamComponent.NewInstance XStreamComponent.newInstance() XMLストリームオブジェクトを作成します。
BaseConditionVO vo = getBaseConditionVOForTable();ページネーションクエリパラメーターオブジェクトを作成します。
3。vo.addparams vo.addParams("name", getPara("name"));検索フィールドの値をクエリオブジェクトに入れます。
4。DealorderService.getByissueuid dealOrderService.getByIssueUid(vo, vo.createRowBounds()); MyBatisのページネーションクエリ方法は非常にシンプルです。グループの友人は、MyBatisのページネーションコンポーネントを特別に作成していました。元のMyBatisクエリメソッドを使用する方が効率的だと思います。その後、MyBatisでXMLの対応するSQLライティング方法を書きます。
5。renderxml renderXml(response, xmlResponse.replaceAll("__", "_")); JSPの出力ストリームにデータを書き込みます。
最後に、MyBatisを介してページングデータを取得する方法を紹介しましょう。
mappper.java
パッケージcom.honzh.biz.database.mapper; import java.math.bigdecimal; import java.util.hashmap; import java.util.list; import org.apache.ibatis.session.rowbounds; import com.honzh.common.common.baseconditionvo; @suppresswarnings（ "rawtypes"）list <hashmap> getbyissueuid（baseconditionvo vo、rowbounds createrowbounds）;}
mapper.xmlを渡す2つのオブジェクトは、baseconditionvoとページングロウバウンドです。 XMLのSQLは自動的にページングされます。
mappper.xml
<select id = "getbyissueuid" resulttype = "hashmap" parametertype = "map"> select * from daa where where is_delete = 0 <if test = "mo.name！= null and mo.name！= ''"> Orderfield！= '' "> Order by $ {Orderfield} <if test =" OrderDirection！= null and orderDirection！= '' "> $ {orderDirection} </if> </sight> oderrowboundsに注意を払うことはできません。MyBatisは自動的に制限をカプセル化します。検索ドメインの名前は、mo.nameまたは。 OrderfieldとOrderDirectionも渡されます。
これまでのところ、JQGridに埋め込まれたブートストラップ全体が成功裏に終了しました。わかりました、あなたのテーブルを素晴らしいものにしてください！