jQueryのEasyui / TopJUI JSとのデータテーブルを作成し、CRUD機能を実装
HTML
<テーブルのid = "productDg"> </ TABLE>
< - -表格工具栏开始！>
の<divのid = "productDg-ツールバー"クラス= "topjui-ツールバー"
データ・オプション= "グリッド：{
タイプ：」データグリッド」、
ID： 'productDg'
} ">
<a id="add" href="javascript:void(0)">新增</a>の
<ID ="編集"のhref =" javascriptの：ボイド（0 ） ">编辑</a>の
<a id="delete" href="javascript:void(0)">删除</a>の
<フォームID =" queryForm」クラス= "検索ボックス">
の<input type = 「テキスト」名前=「名前」データトグル=「topjui、テキストボックス」
データ・オプション= "ID： '名前'、プロンプト'产品名称'、幅：100">
の<input type = "text"の名= "コード"データトグル= "topjui-テキストボックス"
データ・オプション= "ID 'コード'、プロンプト： '产品型号'、幅：100" >
<ID = "queryBtn "HREF =" javascriptを：無効（0） ">查询する</a>
</ FORM>
</ div>
<！ -エンドテーブルツールバー- >
<！ -編集ウィンドウのテーブルの行- >
<フォームID = "editDialog"> </フォーム>
JS
//进度条创建
関数progressFormatter（値、rowData、rowIndexに）{ VAR htmlstr = '<DIV ID = "P"クラス= "topjui-プログレスプログレス"データ・オプション= "値：' +値+「 "スタイル="幅：398px;高さ：26px; "> '; htmlstr + = '<DIV CLASS = "プログレス・テキスト"スタイル= "幅：398px;高さ：26px;行の高さ：26px;">' +値+ '％</ div>'; htmlstr + = '<DIV CLASS = "プログレス値"スタイル= "幅：' +値+ '％;高さ：26px;行の高さ：26px;">'; htmlstr + = '<DIV CLASS = "プログレス・テキスト"スタイル= "幅：398px;高さ：26px;行の高さ：26px;">' +値+ '％</ div>'; htmlstr + = '</ div>'; htmlstr + = '</ div>'; htmlstr返します。 } 関数operateFormatter（値、行インデックス）{ VAR htmlStr = '<Buttonクラス= "layui layui-BTN-BTN-BTN-XS-layui危険"のonclick =「deleteRowを（\' '+ row.uuid +' \ '） 「>>「</ボタンを削除し、 htmlStrを返す; }
//データテーブルを作成します。
$（関数（）{
VAR productDgは= {
タイプ： 'データグリッド'、
ID： 'productDg'
};
$（ "＃productDg"）iDatagrid（{。
fitColumns：真、
remoteSort：偽、
URL：」../ .. /json/datagrid/product-list.json」、
frozenColumns：[[
{フィールド： '名前'、タイトル： '商品名称'、ソート可能：真}、
{フィールド： 'コード'、タイトル： '商品编号'、ソート：真}
]]、
カラム：[[
{フィールド： 'のuuid'、タイトル： 'UUID'、チェックボックス：真}、
{フィールド： 'スペック'、タイトル： '规格型号'、ソート可能：真}、
{フィールド： 'SALE_PRICE'、タイトル：「販売価格」、ソート可能：真}、
{フィールド： 'レート'、タイトル： '完成率'、ソート：真、フォーマッタ：progressFormatter}、
{フィールド： '動作'、タイトル： '操作'、フォーマッタ：operateFormatter、幅：100}
]]、
フィルタ[ {
フィールド： '名前'、
種類： 'テキストボックス'、
OP：[ '含む'、 '等しい'、 'NOTEQUAL' '未満'、 '大きい']
}、{
フィールド： 'コード'、
種類： 'コンボボックス' 、
オプション：{
valueField： 'ラベル'、
テキストフィールド： '値'、
データ：[{
ラベル： '2103'、
値'2103'
}、{
ラベル： '5103'、
値'5103'
}、{
ラベル： '1204'、
値'1204'
}]
}、
OP：[ '含む'、 '等しい'、 'NOTEQUAL' '未満'、「大きいです「]
}、{
フィールド： 'スペック'、
種類： 'コンボボックス'、
オプション：{
valueField： 'ラベル'、
テキストフィールド： '値'、
複数：真、
データ：[{
ラベル： 'KC-W200SW'、
値： "KC-W200SW」
}、{
ラベル： 'ホワイト1688BY-2 LR'、
値'ホワイト1688BY-2 LR'
}、{
ラベル： '銀339WBA 339 BCD'、
値'銀339WBA 339 BCD'
}]
}、
OP ：[ '等しい'、 'NOTEQUAL'、 '以下'、 '大'、 '含む']
}]
}）;
//イベントの追加
$（ "追加＃"）をiMenubutton（{
メソッド： 'は、openDialog'、
拡張： '＃productDg-ツールバー'、
iconCls： 'FA FA-PLUS'、
btnCls： 'topjui-BTNブルー'、
ダイアログ：{
ID： 'userAddDialog'、
タイトル：「マルチタブレイアウトフォーム」
HREF：_ctx + '/html/complex/dialog_add.html'、 // ダイアログパス
buttonsGroup：[
{
テキスト： '保存'、
URL：_ctx + '/json/response/success.json'、
iconCls：「FA FA -Plus '
ハンドラー：' ajaxForm '
btnCls：' topjui-BTN-ブラウン
}
]
}
}）;
//編集イベント
。$（ "＃編集"）iMenubutton（{
方法：「openDialogの'は
延長：' ＃をツールバー-productDg '
iconCls：' FA-FA鉛筆'
btnCls：' topjui-BTN-グリーン、
グリッド：productDg、
ダイアログ：{
タイトル： '一般的なレイアウトのフォーム'、
高さ：550、
HREF：_ctx + '/html/complex/dialog_edit.html?uuid={uuid}'、// [開く]ダイアログパス
URL：_ctx +「/ JSON /データグリッド/ ？製品-detail.json UUID UUID = {} '
buttonsGroup：[
{
テキスト：'更新'
URL：_ctx +' /json/response/success.json '
iconCls：' FA FA-保存'
ハンドラ：' ajaxForm '
btnCls：' topjui-BTN-グリーン
}
]
}
}）;
//削除するには、テーブルツールバーのイベント
。$（ "＃削除"）iMenubutton（{
メソッド,: "doAjax "
拡張： '＃productDg-ツールバー'、
iconCls： 'FA FA-ゴミ箱'、
btnCls： 'topjui-BTN-ブラウン'、
confirmMsg：「これはアヤックスは、データがコミット操作を削除するよりも、より多くのを可能にする]チェックボックスで、グリッドを提出指定されたパラメータ値.PARAM '
グリッド：{
タイプ：'データグリッド'
ID：' productDg '
uncheckedMsg：'削除するデータを確認してください'
PARAM：' UUID：UUID、コード：コード'
}、
URL：_ctx + '/json/response/success.json'
}）;
//クエリ
$（ '＃のqueryBtn'）iMenubutton（{。
方法： 'クエリ'、
iconCls： 'FA FA-検索'、
btnCls '青色-BTN-topjui '
形式：{ID：'queryForm '}、
グリッド：{タイプ： 'データグリッド'、 'ID'： 'productDg'}
}）;
}）;
、リクエストはヒント、成功は要求を促し失敗し、要求はそうでテーブルをリフレッシュ成功し、このような削除AJAX要求として、状況に応じてコードを書いてください！'' メサジェ-情報「）;
}
具体的な機能は、需要に応じて実装されています。
EasyUI中国のネットワーク：http://www.jeasyui.cn
TopJUIフロントエンドフレーム：http://www.topjui.com
TopJUI交換コミュニティ：http://ask.topjui.com