日期:2014-05-17  浏览次数:20718 次

怎样绑定数据到jQuery EasyUI的上DataGrid?
我的代码如下,但我不知道怎样绑定DataGrid数据。
前台:
 <title>jQuery EasyUI DataGrid</title>
  <link href="css/easyui.css" rel="stylesheet" type="text/css" />
  <link href="css/icon.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
  <script src="js/jquery.easyui.min.js" type="text/javascript"></script>
  <script type="text/javascript">

  $(function () {  
  $('#test').datagrid({
  title: 'My Title',
  iconCls: 'icon-save',
  width: 500,
  height: 350,
  nowrap: fals
  striped: true,
  collapsible: true,
  url: 'datagrid_data.json',  
  sortName: 'code',
  sortOrder: 'desc',
  remoteSort: false,
  idField: 'code',
  frozenColumns: [[
{ field: 'ck', checkbox: true },  
{field: 'BoardId', title: '栏目编号', width: 80, sortable: true,
sorter: function (a, b) {
return (a > b ? 1 : -1);
}
},
]],
  columns: [[
{ field: 'BoardURL', title: '栏目连接', width: 120, sortable: true,
sorter: function (a, b) {
return (a > b ? 1 : -1);
}
},
{ field: 'BoardText', title: '栏目名称', width: 120, sortable: true,
sorter: function (a, b) {
return (a > b ? 1 : -1);
}
},
{ field: 'BoardImg', title: '栏目图片', width: 150, sortable: true,
sorter: function (a, b) {
return (a > b ? 1 : -1);
}
},
]],
  pagination: true,
  rownumbers: true,
  toolbar: [{
  id: 'btnadd',
  text: 'Add',
  iconCls: 'icon-add', //相当于class,用于定义css的
  handler: function () {
  $('#btnsave').linkbutton('enable');
  alert('add')
  }
  }, {
  id: 'btncut',
  text: 'Cut',
  iconCls: 'icon-cut',
  handler: function () {
  $('#btnsave').linkbutton('enable');
  alert('cut')
  }
  }, '-', {
  id: 'btnsave',
  text: 'Save',
  disabled: true,
  iconCls: 'icon-save',
  handler: function () {
  $('#btnsave').linkbutton('disable');
  alert('save')
  }
  }]
  });
  var p = $('#test').datagrid('getPager');
  if (p) {
  $(p).pagination({
  onBeforeRefresh: function () {
  alert('before refresh');
  }
  });
&nbs