jquery easyui datagrid 动态表头 + 嵌套对象属性展示

01

$(

function

()
{

02

var

columns
=

new

Array();

03

var

cols
=

new

Array();

04

var

colData
=

new

Object();

05

06

$.post(

"url"

,

"params"

,

function

(data){

07

//动态生成表头开始

08

if

(data.xxxx
!=

null

){

09

$.each(data.xxxx,

function

(){

10

colData
=

new

Object();

11

colData.field
=

this

.resCode;

12

colData.title
=

this

.resName;

13

colData.width
= 100;

//也可以配置在数据库，这样整个页面的生成全部是配置的

14

colData.formatter
=

function

(value,row,index){

15

16

//这两句是嵌套对象属性绑定，insideObject
为嵌套的对象，field 为对象的属性

17

//datagrid
的field不能重复，注意在绑定field 时不能全部用 insideObject，需要使用  insideObject 的属性绑定

18

var

field
=

this

.field;

19

return

row.insideObject[field];

20

21

};

22

cols.push(colData);

23

});

24

};

25

columns.push(cols);

26

//动态生成表头结束

27

28

var

gridCfg
= {

29

fit
:

true

,

30

loadMsg
:

'数据加载中......'

,

31

url
: opts.resDataQueryUrl,

32

nowrap
:

true

,

33

border
:

false

,

34

striped
:

true

,

35

pagination
:

true

,

36

pageSize
: opts.pageSize,

37

rownumbers
:

true

,

38

singleSelect:

false

,

39

columns
: columns,

40

fitColumns
:

false

,

41

queryParams
: {},

42

frozenColumns
:   [[

43

{field:

'ck'

,checkbox:

true

}

44

]],

45

onLoadSuccess:

function

(data){

46

}

47

};

48

$(

'#id'

).datagrid(gridCfg);

49

50

});

51

52

});