{
 "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",
      "border": "false",
      "itemId": "tablePanel",
      "html": "<div id = \"simple-table-tabu-1\"><\/div>",
      "region": "center"
     },
     "expanded": false,
     "children": [],
     "type": "panel",
     "events": {"afterrender": "// app.table1 = new Tabulator(\"#\" + panel.id, {\
app.table1 = new Tabulator(\"#simple-table-tabu-1\", {\
  locale: true,\
  pagination: \"local\",\
  paginationSize: 10,\
  paginationSizeSelector: [10, 20, 50, 100],\
  paginationCounter: \"rows\",\
  //如果是分页 设置小于100%否则wb导致无法显示分页footer\
  height: \"100%\",\
  //开启可移动列\
  movableColumns: true,\
  //开启选中模式\
  selectable: true,\
  columns: [{\
    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\
  }, {\
    title: \"类别\",\
    field: \"SYS_CATEGORY\",\
    sorter: \"string\",\
    editor: \"input\",\
    headerFilter: customEditor,\
    headerFilterLiveFilter: false\
  }, {\
    title: \"key\",\
    field: \"SYS_KEY\",\
    sorter: \"string\",\
    headerFilter: true\
  }, {\
    title: \"value\",\
    field: \"SYS_VALUE\",\
    sorter: \"string\",\
    headerFilter: true\
  }, {\
    title: \"代码序号\",\
    field: \"SYS_SEQ\",\
    sorter: \"string\",\
    formatter: keyFormater,\
    keyName: \"\",\
    headerFilter: true,\
    headerFilterLiveFilter: false\
  }, {\
    title: \"创建人\",\
    field: \"CREATED_BY\",\
    sorter: \"string\",\
    formatter: redisFormatter,\
    headerFilter: \"list\",\
    headerFilterLiveFilter: false,\
    headerFilterParams: {\
      values: {\
        \"admin\": \"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\
  }]\
});\
\
//取redis中参数\
function redisFormatter(cell, formatterParams, onRendered) {\
  var values = new Map();\
  values.set(\"admin\", \"Admin\");\
  return values.has(cell.getValue()) ? values.get(cell.getValue()) : cell.getValue();\
}\
\
//自定义筛选记录\
function customEditor(cell, onRendered, success, cancel, editorParams) {\
  var container = document.createElement(\"span\");\
\
  var inputEl = document.createElement(\"input\");\
  var dataList = document.createElement(\"datalist\");\
\
  var tableId = cell.getTable().element.id;\
  var field = cell.getField();\
\
  dataList.setAttribute(\"id\", tableId + \"-\" + field);\
  inputEl.setAttribute(\"list\", tableId + \"-\" + field);\
\
  inputEl.setAttribute(\"type\", \"text\");\
  inputEl.style.padding = \"2px\";\
  inputEl.style.width = \"100%\";\
  inputEl.style.boxSizing = \"border-box\";\
\
  inputEl.value = cell.getValue();\
\
  function buildValues() {\
    success(inputEl.value);\
  }\
\
  function keypress(e) {\
    if (e.keyCode == 13) {\
      buildValues();\
    }\
\
    if (e.keyCode == 27) {\
      cancel();\
    }\
  }\
\
  function inputFocus() {\
    dataList.innerHTML = \"\";\
    var data = cell.getTable().getData();\
    var set = [];\
    for (var i in data) {\
      if (set.indexOf(data[i][cell.getField()]) === -1) {\
        set.push(data[i][cell.getField()]);\
        var option = document.createElement(\"option\");\
        option.setAttribute(\"value\", data[i][cell.getField()]);\
        dataList.appendChild(option);\
      }\
    }\
  }\
\
  inputEl.addEventListener(\"change\", buildValues);\
  inputEl.addEventListener(\"blur\", buildValues);\
  inputEl.addEventListener(\"keydown\", keypress);\
  inputEl.addEventListener(\"focus\", inputFocus);\
\
  container.appendChild(inputEl);\
  container.appendChild(dataList);\
  return container;\
}\
\
function keyFormater(cell) {\
    return cell.getValue() === \"1\" ? \"一\" : cell.getValue();\
  }\
  //单时间过滤\
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 = \"2px\";\
    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 = \"2px\";\
  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": ""
}