方法


使用

通过jquery选择器选择Dategrid 实例标签进行方法调用:

  1. $('#table').getSelected();

方法表

方法名 说明 使用方法
getSelected 获取当前选择项目 查看
cancelSelected 取消所有选择 查看
addField 添加列 查看
modifyField 修改列显示 查看
showField 显示列 查看
hideField 隐藏列 查看
addBottomTr 添加表格底部行 查看
gotoPage 跳转到第几页 查看
getPage 获取当前是第几页
getPageSize 获取当前每页显示多少条
getAllData 获取所有数据
getSource 获取当前数据源
getTotalData 获取总共多少条数据
reloadUrl 重新加载数据源 查看
putData 把数据输入表格 查看
loadData 异步加载数据把数据输入表格 查看
refresh 刷新表格
updateTableWidth 更新表格宽度
mask 显示或隐藏表格遮罩 查看

getSelected

获取当前选择项目。

  1. var a = $('#table').getSelected();

cancelSelected {#cancelselected}

取消所有选择。

  1. $('#table').cancelSelected();

addField {#addfield}

添加列。

  1. $('#table').addField('操作', function(trData) {
  2. if (trData.param == "编辑") {
  3. return '<button type="button">"编辑按钮"</button>'
  4. }
  5. return '<button type="button">"不是编辑按钮"</button>'
  6. });
  7. //第一个参数代表添加的列对应的字段名
  8. //第二个函数参数返回内容将显示到表格中
  9. //第二个函数中trData代表每条数据
  10. $('#table').addField({title:'操作',width:200}, function(trData) {
  11. if (trData.param == "编辑") {
  12. return '<button type="button">"编辑按钮"</button>'
  13. }
  14. return '<button type="button">"不是编辑按钮"</button>'
  15. });
  16. //可以指定添加列的宽度
  17. $('#table').addField({title:'操作',width:200}, function(trData) {
  18. if (trData.fieldName == "编辑") {
  19. return '<button type="button">"编辑按钮"</button>'
  20. }
  21. return '<button type="button">"不是编辑按钮"</button>'
  22. },3);
  23. //最后一个参数将代表添加的列的位置在表格的第三列

modifyField {#modifyfield}

操作列显示值。

  1. $('#table').modifyField('fieldName', function(trData) {
  2. return trData.fieldName + '修改'
  3. });
  4. //第一个参数代表修改的列对应的字段名
  5. //第二个函数参数返回内容将显示到表格中
  6. $('#table').modifyField([{
  7. field:'fieldName1',
  8. ruleFn:function(trData){
  9. return trData.fieldName1 + '修改'
  10. }
  11. },{
  12. field:'fieldName2',
  13. ruleFn:function(trData){
  14. return trData.fieldName2 + '修改'
  15. }
  16. }])
  17. //一次方法修改多个列

showField {#showField}

显示列。

  1. $('#table').showField('fieldName');

hideField {#hideField}

隐藏列。

  1. $('#table').hideField('fieldName');

addBottomTr {#addBottomTr}

添加表格底部行。

  1. $('#table').addBottomTr(function (tableData) {
  2. return '<td></td>';
  3. })

gotoPage {#gotoPage}

跳转到第几页。

  1. $('#table').gotoPage(2);

reloadUrl {#reloadUrl}

重新加载数据源,即重新加载表格的source。

  1. $('#table').reloadUrl('callAndSmsCenter.do?callAndSmsData&gsId=2');
  2. $('#table').reloadUrl('callAndSmsCenter.do?callAndSmsData&gsId=2',true);
  3. //第二个参数为true将返回当前页的数据,否则是第一页的数据

putData {#putData}

将数据输入表格显示,前提是表格没有source配置。

  1. var data = [{
  2. id:1,
  3. fieldName:fieldVal
  4. },{
  5. id:2,
  6. fieldName:fieldVal
  7. }]
  8. $('#table').putData(data);

loadData {#loadData}

异步获取数据后,将数据输入表格显示,相当异步获取数据后执行putData。前提是表格没有source配置。

  1. $('#table').loadData('callAndSmsCenter.do?callAndSmsData&gsId=2');

mask {#mask}

显示表格遮罩,和loading不同的是没有loading图标。

  1. $('#table').mask('show');//显示表格遮罩
  2. $('#table').mask('hide');//隐藏表格遮罩