jQuery EasyUI学习02：datagrid控件整理

控件datagrid使用

注意点：数据中有控件需要渲染

<script type="text/javascript">

$(function(){

/**

* 当列中有动态的数据和按钮的，比如：

<a id='btn' href='#' class='easyui-linkbutton' >预定</a>

直接写出这样是不会显示按钮的。

要注意js代码的执行顺序。

首先，加载页面完毕，后把js+css等库加载上。

其次，这些库再渲染组件。

然后，加载json数据，a标签才来，这时已不会渲染。

所以，在数据加载完毕之后再做渲染（就是通过js创建）。

*/

$("#datagrid").datagrid({

columns:[[ //用二位数组的方式

{"checkbox":true},

{title:"车次",width:100,field:'ceci'},

//title中可以添加标签

{title:"出发站<br>终点站",width:100,field:'startstate'},

{title:"出发时间<br>到达时间",width:100,field:'starttime'},

{title:"历时",width:100,field:'totaltime'},

{title:"商务座",width:100,field:'swz'},

//预订按钮

{title:"备注",width:100,field:'bz'}

]],

//自动展开/收缩列的大小

fitColumns:true,

//请求数据

url:"datagrid.json",

//顶部工具栏

toolbar:

[{

text:"修改",

iconCls: 'icon-edit',

handler: function(){

alert('编辑按钮')

}

},'-',{

text:"删除",

iconCls: 'icon-help',

handler: function(){

alert('帮助按钮')

}

}]

,

//在数据加载成功的时候触发。

onLoadSuccess:function(){

$("#btn").linkbutton({

iconCls:"icon-add"

})

},

//在从远程站点加载数据的时候显示提示消息。

loadMsg:"数据正在加载中....",

method:"POST",

//如果为true，则在DataGrid控件底部显示分页工具栏。

pagination:true,

//如果为true，则显示一个行号列。

rownumbers:true,

//如果为true，则只允许选择一行。

singleSelect:true,

//是否显示斑马线效果。

striped:true

})

})

</script>