jQuery LigerUI使い方チュートリアルフォーム(1)_jquery

最初の例
概要
ligerGrid は、ligerui シリーズのプラグインの中核となるコントロールであり、ユーザーは並べ替え、ページング、複数のヘッダー、固定列などをサポートする美しく強力なテーブルを迅速に作成できます。

ローカル データとサーバー データ (構成データまたは URL) をサポート
並べ替えとページングをサポート (JavaScript 並べ替えとページングを含む)
列の「表示/非表示」をサポート
複数のテーブル ヘッダーをサポート
固定列のサポート
詳細行のサポート
概要行のサポート
セル テンプレートのサポート
テーブル編集のサポート (セル編集、行編集、詳細編集の 3 つの編集モード)
ツリー テーブルのサポート
グループ化をサポート
コード
最初に基本的な css および js ファイルを紹介します

コードをコピー コードは次のとおりです:

ライガーグリッドを使用できます

コードをコピーします コードは次のとおりです:

効果

データ構造 > テーブル データには 2 つの属性があり、1 つは行、もう 1 つは合計です。このうち、Rows はデータ配列、Total はレコードの総数です。
実際、ローカル データを使用する場合、Total はそれを提供する必要はありません。ローカル データを使用する形式は次のようになります:

コードをコピー コードは次のとおりです:

{

行: [
{ id: '01', name: '部門 01' },
{ id: '02', 名前: '部門 02' },
{ id : '03', 名前: '部門 03' },
{ id: '04', 名前: '部門 04' },
{ id: '05', 名前: '部門 05' },
{ id: '06', name: '部門 06' },
{ id: '07', 名前: '部門 07' }
]
}


id、name 両方 これはレコード属性であり、列を設定するときに、対応する列を設定する必要はなく、対応する表示列を設定するだけで済みます。後続の操作で、これらのプロパティを取得できます。たとえば、メソッド getSelected() です。カスタムセル関数のレンダリング。

ツリー テーブル データ構造
ツリー構造エンジニアは、次のようなテーブル データに基づいて子パラメーターを追加します。

コードをコピー コードは次のとおりです:

{

行: [
{ id: '01'、名前: 'Department 01'、子: [
{ id : '0101', 名前: '部門 0101' },
{ id: '0102', 名前: '部門 0102' },
{ id: '0103', 名前: '部門 0103' }
]
},
{ id: '02', name: '部門 02' },
{ id: '03', 名前: '部門 03' },
{ id: ' 04'、名前: '部門 04' }、
{ id: '05'、名前: '部門 05' }、
{ id: '06'、名​​前: '部門 06' }、
{ id: '07', name: 'Department 07' }
]
}


データをバインドする 2 つの方法

ligerGrid にはデータをバインドする 2 つの方法があります。ローカル データを使用する方法と、サーバー データを使用する方法です。
最初の例では、data パラメータを設定しました。この方法はローカルな方法です。もう 1 つの方法は、URL パラメーターを構成してリモート データを使用することです。

列の構成
テーブルに表示される列の数、列の幅、列セルに表示される内容はすべて、列属性によって構成されます。列の構成パラメーターは次のとおりです。

コードをコピー コードは次のとおりです:

{
display: 'シリアル番号', //ヘッダー列に表示されるテキスト、html をサポート
//ヘッダー コンテンツのカスタム関数
headerRender: function (column) {
return "" column.display "";
name: 'id', //セルマッピングの行データ属性
align: 'center ' , //セル内容の配置: 左/中央/右
hide: false, // 非表示にするかどうか
width: 100, // 列の幅
minWidth: 50, // 最小値列の幅
isSort: true, //この列の並べ替えが許可されているかどうか、デフォルトでは並べ替えが許可されています
isAllowHide: true, //非表示が許可されているかどうか、許可されている場合は、 [列の右クリック メニューの表示/非表示]
type: 'string', //並べ替えに使用される型
//カスタム セル レンダラー
render: function (record, rowindex, value, column) {
//ここではグリッドを指します
//レコード行データ
//rowindex 行インデックス
//value 現在の値、record[column.name] に対応
//column 列information
return value; //セルに表示されるこの HTML コンテンツを返します (通常は値と行の内容に従って整理されます)
},
//列の概要
totalsummary: {
align: 'center', //集計セルの内容 配置: 左/中央/右
type: 'count', //集計タイプの合計、最大、最小、平均、カウント。複数のタイプを同時に実行できます
レンダリング: function (e) { //概要レンダラー、セルにロードする HTML を返します
//e 概要オブジェクト (合計、最大、最小、平均、カウントを含む)
return "

合計数:" e.count "

"
}
},
//セルエディタ
エディタ: {
タイプ: ' text'
},
//複数のテーブル ヘッダーは
列をサポートします: null
},

テーブルの列は、次のような非常に完全なインターフェイスを提供します。拡張されました。コンテンツ セルでもヘッダー セルでも、コンテンツ、レイアウト、サイズはカスタマイズできます。
カスタムヘッダー
たとえば、ヘッダーでは、表示を HTML の一部に直接設定できます:

コードをコピー コードは次のとおりです:

{
display: 'Department', //表示されるテキストヘッダー列で、html
name: 'name'、
align: 'left'
}、

をサポートするか、headerRender:

コードをコピー コードは次のとおりです:

//ヘッダー内容カスタム関数

headerRender: function (column) {
return "" column.display "";


レンダリング

🎜>列の名前は、どのセルが行データにリンクされているかを定義する属性です。たとえば、上記の例の最初の行では、名前が ID として設定されている場合は「01」と表示され、名前が設定されている場合は「部門 01」と表示されます。セルの配置を決定する align パラメータもあります。
レンダリングが構成されていない場合、セルに表示されるコンテンツは名前によって決まります。




コードをコピー

コードは次のとおりです: { name: 'id' , 表示: 'シリアル番号', 幅: 200 }, { 名前: '名前', 表示: '名前', 幅: 300 }

上記はセルです。デフォルトの表示モードです。この方法に加えて、フォーマッタやカスタム関数も使用できます。

セルの内容の表示ルール:
、レンダリングが構成されている場合は、レンダリング を使用します。列の type パラメーターが対応するフォーマッタを拡張する場合は、レンダリングにフォーマッタを使用します。たとえば、通貨形式を定義するフォーマッタ
は、$.ligerDefaults.Grid.formatters['columntype'] を拡張することで最終的に使用されます。 . 型パラメータ。たとえば、今すぐ通貨形式をフォーマットしたい場合:




コードをコピーします

コードは次のとおりです:

$.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
//num 現在値
//column 列情報
if (!num ) return "$0.00";
num = num.toString().replace(/$|,/g, '');
if (isNaN(num))
num = "0.00"; >sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 0.50000000001);
cents = num % 100; Floor(num / 100).toString();
if (セント セント = "0" セント;
for (var i = 0; i num = num.substring(0, num.length - (4 * i 3)) ','
num.substring(num.length - (4 * i 3));
return "$" (((sign) ? '' : '-') '' num '.' セント);



このように、列の型が通貨として設定されている限りは可能です。この関数はセルの内容をカスタマイズするために使用されます

コードをコピー コードは次のとおりです: { 表示: 'UnitPrice', 名前: 'UnitPrice', align: 'right' ,type: 'currency' }

レンダリング

カスタム セル関数
カスタム セル関数とは、列のレンダリングの構成を指します。任意のhtmlを整理できます。

コードをコピー コードは次のとおりです。 var Grid = $("#maingrid" ).ligerGrid ({

columns: [

{ 名前: 'id'、表示: 'シリアル番号'、幅: 100、
レンダリング: 関数 (レコード、行インデックス、値、列) {
//this これはグリッドを指します
//レコード行データ
//rowindex 行インデックス
//値 現在の値、record[column.name] に対応
//column 列情報
return "< ;a href='edit.htm?id=" value "'>Edit"
}
},
{ name: 'id', display: 'シリアル番号'、幅: 120、
render: function (record, rowindex, value, column) {
return ''
}
},
{ name: 'name', 表示: '名前'、幅: 300 }
],
データ: { 行: グリッドデータ }
});


レンダリング

セル エディター
すべてのエディター構成は $.ligerDefaults.Grid.editors で定義されます (

コードをコピー

コードは次のとおりです: editor: { type: 'spinner' }

は $ .ligerDefaults を使用します.Grid.editors['spinner'] を使用して、ビルドするエディターを作成します。

ligerGrid は、チェック ボックス、テキスト ボックス、日付、数値調整器、ドロップダウン ボックスなどの組み込みエディターを提供します。

レンダリング


列には多くのパラメーターがありますが、ここではすべてをリストしません。一般的に使用されるパラメーターのみを紹介します。
詳細については、API を参照してください。 : http:// api.ligerui.com
ソートとページング

ソートとページングにも 2 つの方法があります。 1 つはローカルのソートとページングです。 1 つはサーバーのソートとページングです。ここではローカルな方法のみを紹介します。
デフォルトの状況。並べ替えとページングが有効になります。ページング機能をキャンセルしたい場合は、次のようにします。


コードをコピー

コードは次のとおりです: usePager: false

效果图

事件和方法
事件

事件名	参数	描述
onAfterAddRow	(e)	增加行后事件
onAfterBeginEdit	(e)	开始编辑后事件
onAfterChangeColumnWidth	(column, newwidth)	改变列宽度事件
onAfterShowData	(data)	显示完数据事件
onAfterSubmitEdit	(e)	提交编辑 事件
onBeforeChangeColumnWidth	(column, newwidth)	验证 改变列宽度 是否通过
onBeforeCheckAllRow	(checked, grid element)	选择前事件，可以通过return false阻止操作(复选框 全选/全不选)
onBeforeEdit	(e)	编辑前事件
onBeforeShowData	(data)	显示数据前事件，可以通过reutrn false阻止操作
onBeforeSubmitEdit	(e)	验证编辑器结果是否通过
onBeginEdit	(e)	验证 开始编辑 是否通过
onCancelEdit	(e)	取消编辑 事件
onChangeSort	()	改变排序事件
onCheckAllRow	(checked, grid element)	选择事件(复选框 全选/全不选)
onCheckRow	(checked, rowdata, rowindex, rowDomElement)	选择事件(复选框)
onContextmenu	(parm, e)	右击事件
onDblClickRow	(rowdata, rowindex, rowDomElement)	双击行事件
onDragCol	(node)	拖动列事件
onError	()	错误事件
onLoaded	()	加载完函数
onLoading	()	加载时函数
onReload	()	刷新事件，可以通过return false来阻止操作
onSelectRow	(rowdata, rowindex, rowDomElement)	选择行事件
onSubmit	()	提交前事件
onSuccess	()	成功事件
onToFirst	()	第一页，可以通过return false来阻止操作
onToggleCol	()	切换列事件
onToLast	()	最后一页，可以通过return false来阻止操作
onToNext	()	下一页，可以通过return false来阻止操作
onToPrev	()	上一页，可以通过return false来阻止操作
onUnSelectRow	(rowdata, rowindex, rowDomElement)	取消选择行事件

例

コードをコピー コードは次のとおりです:

var Grid = $("#maingrid").ligerGrid({
列: [
{ 名前: 'id', 表示: 'シリアル番号', 幅: 200 },
{ 名前: ' name', display : 'name', width: 300 }
],
data: { Rows: Griddata },
onSelectRow: function (rowdata, rowindex) {
//データの行レコードrows
// 0 から始まる行インデックス
alert(rowdata.name);
}
});
grid.bind('SelectRow', function (rowdata, rowindex) {
//これはすべてグリッドを指します

// 行レコードはデータ行用です
// 行インデックスは 0 から始まります
alert(rowdata.name);
});

方法

方法	参数	描述
addEditRow	(rowdata)	增加一个编辑行
addRow	(rowdata, rowParm, isBefore, parentRow)	增加新行
addRows	(rowdataArr)	一次性增加多行
appendRow	(rowData, targetRow, nearRow, isBefore)	附加新行(树模式)
beginEdit	(rowParm)	进入编辑状态
cancelEdit	(rowParm)	取消编辑
changeHeaderText	(columnparm, headerText)	改变表头文本
changePage	(ctype)	改变分页
changeSort	(columnName, sortOrder)	改变排序
collapse	(targetRow)	收缩(树模式)
collapseDetail	(rowParm)	收缩明细
deleteRow	(rowParm)	选择行
deleteSelectedRow	()	删除选择的行
demotion	(targetRow)	降级(树模式)
endEdit	(rowParm)	结束编辑
expand	(targetRow)	展开(树模式)
extendDetail	(rowParm)	展开明细
formatRecord	(record)	格式化数据,删除系统字段
getAdded	()	获取新增的数据
getCheckedRowObjs	()	获取选中的行 DOM对象集合
getCheckedRows	()	获取选中的行数据(复选框)
getChidren	(rowParm)	获取子节点数据(树模式)
getColumn	(columnpam)	获取列信息
getColumns	(columnLevel)	获取指定层级的Columns
getColumnType	(columnname)	根据列名获取列类型
getData	(status, removeStatus)	获取数据
getDeleted	()	获取删除过的数据
getParent	(rowParm)	获取父节点数据(树模式)
getRowObj	(rowParm)	行DOM转换为行数据
getSelected	()	获取选中的行数据(同getSelectedRow)
getSelectedRow	()	获取选中的行数据
getSelectedRowObj	()	获取选中的行 DOM对象
getSelectedRowObjs	()	获取选中的行 DOM对象集合
getSelectedRows	()	获取选中的行数据集合(支持Ctrl多选)
getSelecteds	()	获取选中的行数据集合(支持Ctrl多选)(同getSelectedRows)
getUpdated	()	获取修改过的数据
hasChildren	(rowParm)	是否包括子节点(树模式)
isLeaf	(rowParm)	是否叶节点(树模式)
isTotalSummary	()	是否包含汇总
loadData	(loadDataParm)	刷新数据
loadServerData	(param, clause)	加载数据(服务器)
reRender	(e)	重新加载html
setColumnWidth	(columnparm, value)	调整列宽
setOptions	(parms)	重新设置参数(同名方法set)
SubmitEdit	(rowParm)	提交编辑
toggle	(targetRow)	伸展/收缩节点(树模式)
toggleCol	(columnparm, visible)	显示/隐藏列
updateCell	(cell, value, rowParm)	更新单元格
updateRow	(newRowData, rowDom)	行を更新
アップグレード	(ターゲット行)	アップグレード (ツリー モード)

例

コードをコピー コードは次のとおりです。

Select row(3)
選択範囲を取得

コードをコピー コードは次のとおりです:

var Grid = $("#maingrid").ligerGrid({
columns: [
{ 名前: 'id', 表示: 'シリアル番号', 幅: 200 },
{ 名前: '名前', 表示: '名前', 幅: 300 }
]
}); 🎜>
grid .set({ data: { Rows: Griddata} });

function selectRow(index) {
grid.select(index); getSelectRow() {
var rows = Grid.getSelecteds();
for (var i in rows) {
alert(rows[i].name)
}
}