分页表格控件组装

KevinChen

function getcolumns() {
columns=[];
$.ajax({ url: "getWorkOpSetPage", type: "POST", data: {code: code},dataType: 'json', async: false,success: function (res) {
         $.each(res[0], function (i, item) {var columnslist = {}; if (i > 0) {titlelist[item.title] = "";
                  columnslist.binding = item.title;columnslist.cssClass = item.field;columnslist.width = 150;columnslist.align = 'center';
                  if (item.ctype == "linkselect") {
                     columnslist.inputType = "select";       // 是否是下拉模式
                     columnslist.width = 200;
                     columnslist.binding = item.field;       // 下拉选择使用
                     selectlist.push(item.field + "-" + item.srcscript);  // 存放模糊下拉选择
                  } else if (item.ctype == "linkcloumn") {
                     columnslist.inputType = "linkcloumn-" + item.srcscript;// 根据选择框数据获取字段值
                     columnslist.isReadOnly = true;    // 只读
                  } else if (item.ctype == "cascade") {
                     columnslist.width = 200;
                     columnslist.isReadOnly = true;
                     columnslist.inputType = "cascade-" + item.srcscript; // 是否是下拉模式
                  } else if (item.ctype == "childtable"){
                     columnslist.isReadOnly = true;
                     columnslist.inputType="childtable";
                     columnslist.format=item.srcscript;
                  }
                  if (item.datatype == "日期时间") {
                     if (item.formats == "yyyy-MM-dd HH:mm:ss") {
                        columnslist.width = 200;
                        columnslist.format = 'g';             // 日期格式
                        dtime.push(item.title);                // 控件绑定
                     } else {
                        columnslist.format = 'd';             // 日期格式
                        ddata.push(item.title);                // 控件绑定
                     }
                  } else if (item.datatype == "数字" || item.datatype == "整数") {
                     columnslist.format = 'n' + item.formats;    // 小数点后几位数
                     nnum.push(item.title + "-" + item.formats);  // 控件绑定
                  }
                  columns.push(columnslist);
            }
         });
      }
});
return columns;
}var viewOd = new wjOdata.ODataCollectionView("getLedgerPageList", "", {
pageSize: 10,
pageOnServer: true,
sortOnServer: true,
dataTypes: type,
pageChanged: updateCurrentPageOd,
loaded: updateCurrentPageOd
});
theGrid = new wjGrid.FlexGrid('#theGridList', {
alternatingRowStep: 0,
allowAddNew: true,
allowDelete: true,
itemsSource: viewOd,
// columns: getcolumns(), 这个组装的控件跟样式怎么在分页查询没有效果，怎么给每列的表格不同的控件
})

KevinChen · KevinChen

你好，请参考附件Demo。
实现的关键在于，需要先定义好CollectionView，然后再设置给grid。

KevinChen · KevinChen

你好，关于样式的设置，请参考在线示例：

https://demo.grapecity.com.cn/wi ... ling/Columns/purejs

或者您上传一个完整的可运行的Demo，并详细描述一下您的需求。

zxl111 · zxl111

zxl111 · zxl111

KevinChen 发表于 2019-12-23 18:04
你好，关于样式的设置，请参考在线示例：

https://demo.grapecity.com.cn/wijmo/demos/Grid/Styling/Col ...

这个可以出理吗?

KevinChen · KevinChen

你好，

1、点击搜索、弹框这一步功能，您用jquery-ui或一些基本的模态框组件即可实现。

2、下拉框、时间和日期格式（格式和选择面板）可以参考这个示例：
https://demo.grapecity.com.cn/wijmo/demos/Grid/CustomCells/CustomEditors/purejs

3、数据级联操作，包括您图中的“规格”、“小车号”，都可以通过事件来实现：
参考示例：https://demo.grapecity.com.cn/wijmo/demos/Grid/Events/Editing/purejs
参考API：https://demo.grapecity.com.cn/wijmo/api/classes/wijmo_grid.flexgrid.html#celleditended

4、执行了数据绑定后，只需要加一个参数即可将没有定义的字段隐藏，参考：
https://demo.grapecity.com.cn/wijmo/demos/Grid/Data-binding/Basics/purejs

zxl111 · zxl111

KevinChen 发表于 2019-12-25 10:27
你好，

1、点击搜索、弹框这一步功能，您用jquery-ui或一些基本的模态框组件即可实现。

var viewOd = new wjOdata.ODataCollectionView("getLedgerPageList", "", {
pageSize: 500,
pageOnServer: true,
sortOnServer: true,
dataTypes: {desttable:desttable,code:code,list:list},
pageChanged: updateCurrentPageOd,
loaded: updateCurrentPageOd
});

viewOd.onPageChanged();

function updateCurrentPageOd() {
var curr = wjCore.format('Page {index:n0} of {cnt:n0}', {
      index: viewOd.pageIndex + 1,
      cnt: viewOd.pageCount
});
document.getElementById('spanCurrent').value = curr;
}

document.getElementById('pagerOd').addEventListener('click', function (e) {
var btn = wjCore.closest(e.target, 'button');
var id = btn ? btn.id : '';
switch (id) {
      case 'btnFirstOd':
         viewOd.moveToFirstPage();
         break;
      case 'btnPrevOd':
         viewOd.moveToPreviousPage();
         break;
      case 'btnNextOd':
         viewOd.moveToNextPage();
         break;
      case 'btnLastOd':
         viewOd.moveToLastPage();
         break;
}
});

// 关闭弹出层
layer.closeAll();

theGrid = new wjGrid.FlexGrid('#theGridList', {
alternatingRowStep: 0,
allowAddNew: true,
allowDelete: true,
itemsSource: viewOd,  这个viewOd里面的值怎么给他们定义不同的控件样式，比如时间控件，下拉之类的
// columns: getcolumns(),
formatItem: function (s, e) {
      if (e.panel == s.topLeftCells) {
         // 列显示
         e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>';
      }
}
});

		自动登录	找回密码
密码			立即注册

[已处理] 分页表格控件组装

最佳答案

6 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章