首页 › 求助中心 › 分页表格控件组装

zxl111 发表于 2019-12-23 11:48:15

分页表格控件组装

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) {titlelisttitle] = "";
                  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 发表于 2019-12-23 11:48:16

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

KevinChen 发表于 2019-12-23 18:04:33

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

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

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

zxl111 发表于 2019-12-25 09:18:56

zxl111 发表于 2019-12-25 09:24:53

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

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

这个可以出理吗?

KevinChen 发表于 2019-12-25 10:27:15

你好，

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 发表于 2019-12-25 15:57:56

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>';
      }
    }
});

查看完整版本: 分页表格控件组装