{
 "hidden": false,
 "children": [{
  "configs": {"itemId": "module"},
  "expanded": true,
  "children": [{
   "configs": {
    "layout": "border",
    "itemId": "viewport"
   },
   "expanded": true,
   "children": [
    {
     "configs": {
      "itemId": "tbar",
      "region": "north"
     },
     "expanded": true,
     "children": [{
      "configs": {"itemId": "dockedItems"},
      "expanded": true,
      "children": [
       {
        "configs": {"itemId": "tbar1"},
        "expanded": true,
        "children": [
         {
          "configs": {
           "itemId": "searchItem",
           "text": "查询",
           "iconCls": "search_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "Wb.request({\
  url: 'm?xwl=examples/tabulator/datasource/select',\
  out:app.tbar,\
  success: function(rec) {\
//     console.log(Wb.decode(rec.responseText).rows);\
    app.table1.setData(Wb.decode(rec.responseText).rows);\
  }\
});"}
         },
         {
          "configs": {
           "itemId": "getDataAllItem",
           "text": "获取表中全部数据",
           "iconCls": "book_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "console.log(app.table1.getData());"}
         },
         {
          "configs": {
           "itemId": "getSelectedDataItem",
           "text": "获取选中行数据",
           "iconCls": "book_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "//获取数据\
console.log(app.table1.getSelectedData());\
//获取选中行组件\
// console.log(app.table1.getSelectedRows());"}
         },
         {
          "configs": {
           "itemId": "getEditedDataItem",
           "text": "获取编辑数据",
           "iconCls": "book_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "//获取编辑的单元格\
console.log(app.table1.getEditedCells());"}
         },
         {
          "configs": {
           "itemId": "downloadAllItem",
           "text": "下载全部数据至xlxs",
           "iconCls": "book_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "app.table1.download(\"xlsx\", \"data.xlsx\", {sheetName:\"MyData\"});"}
         },
         {
          "configs": {
           "itemId": "downloadSelectedItem",
           "text": "下载选中数据xlxs",
           "iconCls": "book_icon"
          },
          "expanded": false,
          "children": [],
          "type": "item",
          "events": {"click": "//获取编辑的单元格\
app.table1.download(\"xlsx\", \"data.xlsx\", {sheetName:\"MyData\"},\"selected\");"}
         }
        ],
        "type": "toolbar"
       },
       {
        "configs": {"itemId": "tbar2"},
        "expanded": true,
        "children": [{
         "configs": {
          "itemId": "categray",
          "labelAlign": "right",
          "fieldLabel": "代码类别",
          "labelWidth": "50"
         },
         "expanded": false,
         "children": [],
         "type": "text"
        }],
        "type": "toolbar"
       }
      ],
      "type": "array"
     }],
     "type": "panel"
    },
    {
     "configs": {
      "layout": "fit",
      "itemId": "tablePanel",
      "html": "<div id=\"collapse-table-tabulator\"><\/div>",
      "region": "center"
     },
     "expanded": false,
     "children": [],
     "type": "panel",
     "events": {"afterrender": "app.table1 = new Tabulator(\"#collapse-table-tabulator\", {\
  locale: true,\
  pagination: \"local\",\
  paginationSize: 10,\
  paginationSizeSelector: [10, 20, 50, 100],\
  paginationCounter: \"rows\",\
  //如果是分页 设置小于100%否则wb导致无法显示分页footer\
  height: \"93.5%\",\
  //开启可移动列\
  movableColumns: true,\
  //开启选中模式\
  selectable: true,\
  //设置可展开模式\
  rowFormatter: cusRowFormatter,\
  columns: [{\
    formatter: btnFomatter,\
    headerSort: false\
  }, {\
    formatter: \"rowSelection\",\
    titleFormatter: \"rowSelection\",\
    hozAlign: \"center\",\
    headerSort: false,\
    //无需导出列\
    download: false,\
    cellClick: function(e, cell) {\
      cell.getRow().toggleSelect();\
    }\
  }, {\
    title: \"序号\",\
    formatter: \"rownum\",\
    hozAlign: \"center\",\
    width: 80,\
    headerSort: false,\
    responsive: 0\
  }, {\
    title: \"类别\",\
    field: \"SYS_CATEGORY\",\
    sorter: \"string\",\
    editor: \"input\",\
    headerFilter: \"list\",\
    headerFilterParams: {\
      valuesLookup: true,\
      clearable: true\
    }\
    //wb导致input search无法使用回退键\
    //     headerFilterLiveFilter: false\
    //可编辑l\
  }, {\
    title: \"key\",\
    field: \"SYS_KEY\",\
    sorter: \"string\",\
    headerFilter: true\
  }, {\
    title: \"value\",\
    field: \"SYS_VALUE\",\
    sorter: \"string\",\
    headerFilter: true\
  }, {\
    title: \"代码序号\",\
    field: \"SYS_SEQ\",\
    sorter: \"string\",\
    headerFilter: true,\
    headerFilterLiveFilter: false\
  }, {\
    title: \"创建人\",\
    field: \"CREATED_BY\",\
    sorter: \"string\",\
    headerFilter: \"list\",\
    headerFilterLiveFilter: false,\
    headerFilterParams: {\
      values: [\"admin\", \"\"],\
      clearable: true\
    }\
  }, {\
    title: \"创建时间\",\
    field: \"CREATED_ON\",\
    sorter: \"string\",\
    headerFilter: dateEditor,\
    headerFilterFunc: dateFilter,\
    headerFilterLiveFilter: false\
  }, {\
    title: \"修改人\",\
    field: \"UPDATED_BY\",\
    sorter: \"string\"\
  }, {\
    title: \"修改时间\",\
    field: \"UPDATED_ON\",\
    sorter: \"string\",\
    headerFilter: dateRangeEditor,\
    headerFilterFunc: dateRangeFilter,\
    headerFilterLiveFilter: false\
  }]\
});\
\
//展开按钮\
function btnFomatter(cell, formatterParams, onRendered) {\
  var el = document.createElement(\"div\");\
  var row = cell.getRow()._row;\
  row.isOpen = false;\
  el.classList.add(\"tabulator-responsive-collapse-toggle\");\
\
  el.innerHTML = \"<svg class='tabulator-responsive-collapse-toggle-open' viewbox='0 0 24 24'>\" +\
    \"<line x1='7' y1='12' x2='17' y2='12' fill='none' stroke-width='3' stroke-linecap='round' />\" +\
    \"<line y1='7' x1='12' y2='17' x2='12' fill='none' stroke-width='3' stroke-linecap='round' />\" +\
    \"<\/svg>\" +\
    \"<svg class='tabulator-responsive-collapse-toggle-close' viewbox='0 0 24 24'>\" +\
    \"<line x1='7' y1='12' x2='17' y2='12'  fill='none' stroke-width='3' stroke-linecap='round' />\" +\
    \"<\/svg>\";\
\
  cell.getElement().classList.add(\"tabulator-row-handle\");\
\
  function toggleList(isOpen) {\
    var collapseEl = row.element.lastElementChild;\
\
    if (collapseEl) {\
\
      if (isOpen) {\
        el.classList.add(\"open\");\
        collapseEl.style.display = '';\
      } else {\
        el.classList.remove(\"open\");\
        collapseEl.style.display = 'none';\
      }\
      cell.getRow()._row.isOpen = isOpen;\
    }\
  }\
  el.addEventListener(\"click\", function(e) {\
    e.stopImmediatePropagation();\
    toggleList(!row.isOpen);\
    cell.getTable().rowManager.adjustTableSize();\
  });\
  return el;\
}\
\
function cusRowFormatter(row) {\
  var holderEl = document.createElement(\"div\");\
  holderEl.setAttribute(\"style\", \"display:none;border-spacing:0;\");\
  holderEl.setAttribute(\"width\",\"100%\");\
  var table = document.createElement(\"table\");\
  table.setAttribute(\"style\", \"border-collapse: collapse;margin:10px auto;\");\
  var rowData = row.getData();\
  var tr = document.createElement(\"tr\");\
  createTd(\"类别:\", rowData.SYS_CATEGORY, tr);\
  table.appendChild(tr);\
  holderEl.appendChild(table);\
  row.getElement().appendChild(holderEl);\
\
}\
\
function createTd(title, value, el) {\
  var tdT = document.createElement(\"td\");\
  tdT.setAttribute(\"style\", \"font-weight: bold;\");\
  tdT.innerHTML = title;\
  el.appendChild(tdT);\
\
  var tdV = document.createElement(\"td\");\
  tdV.setAttribute(\"style\", \"font-weight: bold;\");\
  tdV.innerHTML = value;\
  el.appendChild(tdV);\
}\
\
\
//单时间过滤\
function dateFilter(headerValue, rowValue, rowData, filterParams) {\
    //headerValue - the value of the header filter element\
    //rowValue - the value of the column in this row\
    //rowData - the data for the row being filtered\
    //filterParams - params object passed to the headerFilterFuncParams property\
    if (rowValue) {\
      if (headerValue.start) {\
        const rowDate = luxon.DateTime.fromSQL(rowValue);\
        const headerDate = luxon.DateTime.fromSQL(headerValue.start);\
        if (rowDate.toLocaleString(luxon.DateTime.DATE_SHORT) === headerDate.toLocaleString(luxon.DateTime.DATE_SHORT)) {\
          return true;\
        } else {\
          return false;\
        }\
      }\
    }\
\
    return true; //must return a boolean, true if it passes the filter.\
  }\
  //追加单时间控件\
function dateEditor(cell, onRendered, success, cancel, editorParams) {\
    var container = document.createElement(\"span\");\
\
    //create and style inputs\
    var start = document.createElement(\"input\");\
    start.setAttribute(\"type\", \"date\");\
    start.style.padding = \"4px\";\
    start.style.width = \"100%\";\
    start.style.boxSizing = \"border-box\";\
\
    start.value = cell.getValue();\
\
    function buildValues() {\
      success({\
        start: start.value\
      });\
    }\
\
    function keypress(e) {\
      if (e.keyCode == 13) {\
        buildValues();\
      }\
\
      if (e.keyCode == 27) {\
        cancel();\
      }\
    }\
\
    start.addEventListener(\"change\", buildValues);\
    start.addEventListener(\"blur\", buildValues);\
    start.addEventListener(\"keydown\", keypress);\
\
    container.appendChild(start);\
    return container;\
  }\
  //范围时间过滤\
function dateRangeFilter(headerValue, rowValue, rowData, filterParams) {\
  //headerValue - the value of the header filter element\
  //rowValue - the value of the column in this row\
  //rowData - the data for the row being filtered\
  //filterParams - params object passed to the headerFilterFuncParams property\
\
  if (rowValue) {\
    const rowDate = luxon.DateTime.fromSQL(rowValue);\
    if (headerValue.start) {\
      const headerStartDate = luxon.DateTime.fromSQL(headerValue.start);\
      //       if(rowDate.toLocaleString(luxon.DateTime.DATE_SHORT)===headerDate.toLocaleString(luxon.DateTime.DATE_SHORT))\
      if (headerValue.end) {\
        const headerEndDate = luxon.DateTime.fromSQL(headerValue.end).plus({\
          days: 1\
        });\
        return rowDate >= headerStartDate && rowDate <= headerEndDate;\
      } else {\
        return rowValue >= headerStartDate;\
      }\
    } else {\
      if (headerValue.end) {\
        const headerEndDate = luxon.DateTime.fromSQL(headerValue.end).plus({\
          days: 1\
        });\
        return rowDate <= headerEndDate;\
      }\
    }\
  }\
\
  return true; //must return a boolean, true if it passes the filter.\
}\
\
function dateRangeEditor(cell, onRendered, success, cancel, editorParams) {\
  var end;\
  var container = document.createElement(\"span\");\
\
  //create and style inputs\
  var start = document.createElement(\"input\");\
  start.setAttribute(\"type\", \"date\");\
  start.setAttribute(\"placeholder\", \"开始\");\
  start.style.padding = \"4px\";\
  start.style.width = \"50%\";\
  start.style.boxSizing = \"border-box\";\
\
  start.value = cell.getValue();\
\
  function buildValues() {\
    success({\
      start: start.value,\
      end: end.value\
    });\
  }\
\
  function keypress(e) {\
    if (e.keyCode == 13) {\
      buildValues();\
    }\
\
    if (e.keyCode == 27) {\
      cancel();\
    }\
  }\
\
  end = start.cloneNode();\
  end.setAttribute(\"placeholder\", \"结束\");\
\
  start.addEventListener(\"change\", buildValues);\
  start.addEventListener(\"blur\", buildValues);\
  start.addEventListener(\"keydown\", keypress);\
\
  end.addEventListener(\"change\", buildValues);\
  end.addEventListener(\"blur\", buildValues);\
  end.addEventListener(\"keydown\", keypress);\
\
\
  container.appendChild(start);\
  container.appendChild(end);\
\
  return container;\
}"}
    }
   ],
   "type": "viewport"
  }],
  "type": "module"
 }],
 "roles": {"default": 1},
 "title": "",
 "iconCls": "",
 "inframe": false,
 "pageLink": ""
}