/** * datagrid - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt * * Copyright 2010 stworthy [ stworthy@gmail.com ] * * Dependencies: * resizable * linkbutton * pagination * */ /** * 整个表格对象说的是最外层div.datagrid元素 * 整体布局： * <div.datagrid><!--表格对象,最外层--> * <div.datagrid-title><!--表格的标题--> * <div.datagrid-wrap><!--表格的包裹--> * <div.datagrid-toolbar><!--工具栏的表格--> * <div.datagrid-view> * <div.datagrid-view1><!--设置冻结属性--> * <div.datagrid-header> * <div.datagrid-header-inner> * <div.datagrid-body> * <div.datagrid-body-inner> * <table> * <div.datagrid-vew2><!--正常数据显示区--> * <div.datagrid-header> * <div.datagrid-header-inner> * <div.datagrid-body> * <div.datagrid-resize-proxy> * <div.datagrid-pager><!--分页组件的表格--> */ (($) { setSize(target) { grid = $.(target, ).; opts = $.(target, ).; (opts.
==
) {
p =
grid.
();
opts.
=
p.
();
opts.
=
p.
();
}
(
opts.
|| (
opts.
&&
opts.
.
>
0)) {
$(
,
grid).
addClass(
);
}
gridWidth =
opts.
;
(
gridWidth ==
) {
($.boxModel ==
) {
gridWidth =
grid.
();
}
{
gridWidth =
grid.
outerWidth();
}
}
{
($.boxModel ==
) {
gridWidth -=
grid.
outerWidth() -
grid.
();
}
}
grid.
(
gridWidth);
innerWidth =
gridWidth;
($.boxModel ==
) {
innerWidth =
gridWidth -
grid.
outerWidth() +
grid.
();
}
$(
,
grid).
(
innerWidth);
$(
,
grid).
(
innerWidth);
$(
,
grid).
($(
,
grid).
());
$(
,
grid).
(
innerWidth - $(
,
grid).
outerWidth());
$(
,
grid).
($(
,
grid).
());
$(
,
grid).
($(
,
grid).
());
$(
,
grid).
($(
,
grid).
());
$(
,
grid).
($(
,
grid).
());
hh;
header1 = $(
,
grid);
header2 = $(
,
grid);
header1.
(
,
);
header2.
(
,
);
($.boxModel ==
) {
hh =
.
max(
header1.
(),
header2.
());
}
{
hh =
.
max(
header1.
outerHeight(),
header2.
outerHeight());
}
$(
,
grid).
(
hh);
$(
,
grid).
(
hh);
header1.
(
hh);
header2.
(
hh);
(
opts.
==
) {
$(
,
grid).
($(
,
grid).
());
}
{
$(
,
grid).
(
opts.
- (
grid.
outerHeight() -
grid.
())
- $(
,
grid).
outerHeight(
)
- $(
,
grid).
outerHeight(
)
- $(
,
grid).
outerHeight(
)
- $(
,
grid).
outerHeight(
)
);
}
$(
,
grid).
($(
,
grid).
());
$(
,
grid).
($(
,
grid).
());
$(
,
grid).
(
, $(
,
grid).
outerWidth());
}
/**
* wrap and return the grid object, fields and columns
*/
wrapGrid(target, rownumbers) {
//
首先在最外层包装一个
div.datagrid,
并且返回这个
div.datagrid
grid = $(target).
wrap(
).
();
//
下面开始在外层
div.datagrid
里面装东西
,
层次结构应该是
//<div.datagrid>
// <div.datagrid-wrap>
// <div.datagrid-view>
// <div.datagrid-view1>
// <div.datagrid-header>
// <div.datagrid-header-inner>
// <div.datagrid-body>
// <div.datagrid-body-inner>
// <table>
// <div.datagrid-vew2>
// <div.datagrid-header>
// <div.datagrid-header-inner>
// <div.datagrid-body>
// <div.datagrid-resize-proxy>
grid.
append(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
//
获取哪些冻结列的信息
frozenColumns =
getColumns($(
, target));
//
把冻结列的表头删除掉
$(
, target).
remove();
//
再获取非冻结列的信息
columns =
getColumns($(
, target));
//
再把非冻结列的表头删掉
$(
, target).
remove();
//
把这个表格转移到之前包装好的层次
:div.datagrid->datagrid-wrap->datagrid-view->div.datagrid-vew2->div.datagrid-body
$(target).
attr({
:
0,
:
0,
:
0
}).
removeAttr(
).
removeAttr(
).
($(
,
grid));
getColumns(thead) {
//
从
thead
标签中获取列的设置信息
,
获取冻结列的信息或者是非冻结列的信息
//
返回的
columns
是纯二维对象数组
,
如
:
//[
// [
// {title:"",align:"",sortable:"",checkbox:""},
// {title:"",align:"",sortable:"",checkbox:""}
// ],
// [{title:"",align:"",sortable:"",checkbox:""}]
//]
columns = [];
$(
, thead).
each(
() {
cols = [];
$(
,
).
each(
() {
//
可能这个版本不支持在
data-options
属性上设置列的属性
,
所以这里手动添加下面的代码块
opx =
eval(
+ $(
).
attr(
) +
);
th = $(
);
col = {
:
th.
(),
:
th.
attr(
) ||
,
:
th.
attr(
) ==
||
,
:
th.
attr(
) ==
||
};
(
th.
attr(
)) {
col.
=
th.
attr(
);
}
(
th.
attr(
)) {
col.
=
eval(
th.
attr(
));
}
(
th.
attr(
))
col.
=
parseInt(
th.
attr(
));
(
th.
attr(
))
col.
=
parseInt(
th.
attr(
));
(
th.
attr(
))
col.
=
parseInt(
th.
attr(
));
col = $.
(
col,
opx);
cols.
push(
col);
});
columns.
push(
cols);
});
columns;
}
//
根据获取到的行列配置信息去拿字段
fields =
getColumnFields(
columns);
//
将盛放内容的
td
全部使用
class:datagrid-column-filedname
标记
,
并且里面放置
div.datagrid-cell
$(
,
grid).
each(
() {
(
i =
0;
i <
fields.
;
i++) {
$(
+
i +
,
)
.
addClass(
+
fields[
i])
.
wrapInner(
);
}
});
//
给表格绑定
"_resize"
事件
grid.
bind(
,
() {
opts = $.
(target,
).
;
(
opts.
==
) {
setSize(target);
fixColumnSize(target);
}
;
});
{
:
grid,
:
frozenColumns,
:
columns
};
}
createColumnHeader(columns) {
//
创建表头
,
创建的表头是一个
table
标签
,
这个
table
标签里
,
只有一个
thead,
里面可能有多个
tr
t = $(
);
(
i =
0;
i < columns.
;
i++) {
tr = $(
).
($(
,
t));
cols = columns[
i];
(
j =
0;
j <
cols.
;
j++) {
col =
cols[
j];
attr =
;
(
col.
)
attr +=
+
col.
+
;
(
col.
)
attr +=
+
col.
+
;
th = $(
+
attr +
).
(
tr);
(
col.
) {
th.
attr(
,
col.
);
$(
)
.
(
)
.
(
th);
}
(
col.
) {
th.
append(
);
th.
attr(
,
col.
);
$(
,
th).
(
col.
);
$(
,
th).
(
col.
);
$(
,
th).
(
);
}
{
th.
append(
);
$(
,
th).
(
col.
);
}
}
}
t;
}
/**
* set the common properties
*/
setProperties(target) {
grid = $.
(target,
).
;
opts = $.
(target,
).
;
data = $.
(target,
).
;
(
opts.
) {
$(
,
grid).
addClass(
);
$(
,
grid).
addClass(
);
}
(
opts.
==
) {
$(
,
grid).
(
,
);
}
$(
,
grid).
(
() {
$(
).
addClass(
);
},
() {
$(
).
removeClass(
);
}
);
$(
,
grid).
(
() {
index = $(
).
attr(
);
$(
+
index +
,
grid).
addClass(
);
}).
(
() {
index = $(
).
attr(
);
$(
+
index +
,
grid).
removeClass(
);
}).
click(
() {
index = $(
).
attr(
);
($(
).
hasClass(
)) {
unselectRow(target,
index);
}
{
selectRow(target,
index);
}
(
opts.
onClickRow) {
opts.
onClickRow.
call(
,
index,
data.
[
index]);
}
}).
dblclick(
() {
index = $(
).
attr(
);
(
opts.
onDblClickRow) {
opts.
onDblClickRow.
call(
,
index,
data.
[
index]);
}
});
onHeaderCellClick() {
field = $(
).
().
attr(
);
opt =
getColumnOption(target,
field);
(!
opt.
)
;
opts.
=
field;
opts.
=
;
c =
;
($(
).
hasClass(
)) {
c =
;
opts.
=
;
}
$(
,
grid).
removeClass(
);
$(
,
grid).
removeClass(
);
$(
).
addClass(
c);
(
opts.
onSortColumn) {
opts.
onSortColumn.
call(
,
opts.
,
opts.
);
}
request(target);
}
onHeaderCheckboxClick() {
($(
).
attr(
)) {
$(
,
grid).
each(
() {
(!$(
).
hasClass(
)) {
$(
).
trigger(
);
}
});
}
{
$(
,
grid).
each(
() {
($(
).
hasClass(
)) {
$(
).
trigger(
);
}
});
}
}
$(
,
grid).
unbind(
);
$(
,
grid).
bind(
,
onHeaderCellClick);
$(
,
grid).
unbind(
);
$(
,
grid).
bind(
,
onHeaderCheckboxClick);
$(
,
grid).
resizable({
:
,
:
50,
标签： optex激光位移传感器cd3