Movatterモバイル変換

                            // global                            var TG = window.turbogrid;                            var { Grid, Util } = window.turbogrid;                            // cjs                            var TG = require("turbogrid");                            var { Grid, Util } = require("turbogrid");                            // esm                            import TG from "turbogrid";                            import { Grid, Util } from "turbogrid";

                            //selector                            var grid = new Grid(".container");                            //or element                            var container = document.querySelector(".container");                            var grid = new Grid(container);                            //or options with container                            var grid = Grid({                                container,                                ... other options                            });

                            grid.setData({                                columns: [],                                rows: []                            });

                            var data = grid.getData();

                            //set multiple options                            grid.setOption({                                optionKey1: optionValue1,                                optionKey2: optionValue2                            });                            //set single option                            grid.setOption(optionKey, optionValue);

                            //get all options                            var options = grid.getOption();                            //get single option                            var optionValue = grid.getOption(optionKey);

                            //set multiple formatters                            grid.setFormatter({                                string: function(value, rowItem, columnItem, cellNode) {                                    return value;                                }                            });                            //set single formatter                            grid.setFormatter("string", formatterHandler);

                            function(value, rowItem, columnItem, cellNode) {                                 // value is formatted by null formatter                                // get original value:                                var originalValue = rowItem[columnItem.id];                                var rowIndex = rowItem.tg_index;                                var columnIndex = columnItem.tg_index;                                // using default formatter returns:                                var defaultFormatter = this.getDefaultFormatter("[formatter-name]");                                return defaultFormatter(value + " new text", rowItem, columnItem, cellNode)                            }

                            var stringFormatter = grid.getFormatter("string");

                            var treeFormatter = grid.getDefaultFormatter("tree");

                            grid.bind("onUpdated", function(e, d){                                //console.log(d);                            });

                            grid.once("onUpdated", function(e, eventData){                                //console.log(eventData);                            });

                            grid.unbind();                            grid.unbind("onUpdated");                            grid.unbind("onUpdated", handler);

                            this.trigger(eventType, eventData);

                            var allEventTypes = grid.getAllEvents();

                            grid.render();

                            grid.resize();                            grid.resize(600, 400);

                            grid.destroy();

1. If parameter type is Number, grid will search the row/column item by index. (recommend, highest performance)
2. If parameter type is String, grid will iterates all items to match the row/column id.
3. If parameter type is Object, grid will look at the object properties:
• If there is a tg_index property inside the object, grid will search the row/column item by index. (higher priority)
• if there is an id property (type of string), grid will iterates all items to match the row/column id.

                            var columnItem = grid.getColumnItem(columnIndex);                            var rowItem = grid.getRowItem(rowIndex);                            var rowItem = grid.getRowItem(123);                            var rowItem = grid.getRowItem("id_123");                            var rowItem = grid.getRowItemBy("id", "id_123");                            var rowItem = grid.getRowItemBy("key", "value");

                            grid.showLoading();                            grid.hideLoading();                            grid.setLoading("Loading ...");                            grid.setLoading(function(container) {                                return document.createElement("div");                            });

                            grid.showMask();                            grid.showMask({                                opacity: 0.3                            });                            grid.hideMask();

                            grid.expandAllRows();                            grid.collapseAllRows();                            grid.toggleAllRows();

                            grid.expandRow(rowIndex);                            grid.collapseRow(rowIndex);                            grid.toggleRow(rowIndex);

                            grid.expandRowLevel(level);

                            var exportedData = grid.exportData();                            var exportedData = grid.exportData({                                the_key_need: true,                                key_key_no_need: false                            });

                            var subs = [{name:"row1"},{name:"row2"}];                            grid.setRowSubs(rowIndex, subs);

                            var rows = [{name:"row1"},{name:"row2"}];                            grid.setRows(rows);

                            grid.addRow({                                id: "id1",                                name: "row item"                            });                            grid.addRow(["Row 1", "Row 2"]);                            grid.addRow(["Row 1", "Row 2"], parentIndex);                            grid.addRow("Row Before","level_0", 0);                            grid.deleteRow(2);                            grid.deleteRow([1, 2]);

                            grid.moveRowsToTop(["row_id1", "row_id2"]);                            grid.moveRowsUp(["row_id1", "row_id2"]);                            grid.moveRowsDown(["row_id1", "row_id2"]);                            grid.moveRowsToBottom(["row_id1", "row_id2"]);                                grid.moveSelectedRowsToTop();                            grid.moveSelectedRowsUp();                            grid.moveSelectedRowsDown();                            grid.moveSelectedRowsToBottom();                            grid.moveRows(["row_id"], -1);                            grid.moveRows(["row_id"], -2);                            grid.moveRows("row_id", 1);

                            grid.selectAll();                            grid.selectAll(false);

                            grid.setRowSelected(rowIndex);                            grid.setRowSelected(rowIndex, false);                            grid.setRowSelected();

                            var selectedRow = grid.getSelectedRow();                            var selectedRows = grid.getSelectedRows();

                            grid.setRowHover(rowIndex, true);                            grid.setRowHover(rowIndex, false);

                            grid.setSortColumn(sortColumn);                            grid.removeSortColumn();

                            grid.setColumnWidth(columnIndex, width);

                            grid.showColumn(columnIndex);                            grid.hideColumn(columnIndex);                            grid.showColumn([1, 3]);                            grid.hideColumn([1, 3]);

                            grid.addColumn({                                id: "id1",                                name: "column item"                            });                            grid.addColumn(["Column 1", "Column 2"]);                            grid.addColumn(["Column 1", "Column 2"], parentIndex);                            grid.addColumn("Column Before","level_0",0);                            grid.deleteColumn(2);                            grid.deleteColumn([1, 2]);

                            grid.scrollToRow(rowIndex);                            grid.scrollToColumn(columnIndex);                            grid.scrollToCell(rowIndex, columnIndex);

                            grid.scrollRowIntoView(rowIndex);                            grid.scrollColumnIntoView(columnIndex);                            grid.scrollCellIntoView(rowIndex, columnIndex);

                            grid.setScrollTop(200);                            grid.setScrollLeft(200);                            var st = grid.getScrollTop();                            var sl = grid.getScrollLeft();

                            grid.updateRow(rowIndex);                            grid.updateRow(rowIndex, rowData);                            grid.updateCell(rowIndex, columnIndex);                            grid.updateCell(rowIndex, columnIndex, cellValue);

                            var sbw = grid.getScrollbarWidth();                            var sbh = grid.getScrollbarHeight();

                            var svw = grid.getScrollViewWidth();                            var svh = grid.getScrollViewHeight();

                            var spw = grid.getScrollPaneWidth();                            var sph = grid.getScrollPaneHeight();

                            var len = grid.getRowsLength();                            var totalLen = grid.getRowsLength(true);

                            var totalHeight = grid.getRowsHeight();

                            var rowHeight = grid.getRowHeight(rowIndex);

                            var viewport = grid.getViewport();                            // { rows, columns }

                            var nodes = grid.find(".selector-name");

                            var cellNode = grid.getCellNode(rowIndex, columnIndex);

                            var headerItemNode = grid.getHeaderItemNode(columnIndex);

                            var columnHeaderNode = grid.getColumnHeaderNode(columnIndex);

                            grid.forEachColumn(function(column, index, parent) {                                //                            });                            grid.forEachRow(function(row, index, parent) {                                //                            });

                            var rowItem = grid.getRowItem(rowIndex);                            if (grid.isRowSelectable(rowItem)) {                                console.log("selectable");                            }

                            grid.onNextUpdated(function(e, eventData){                                //console.log(eventData);                            });

                                    [{                                        name: "item 1",                                        subs: [{                                            name : "item 2",                                            subs: [{                                                name : "item 3",                                                subs: [{                                                    ...                                                }]                                            }, ...]                                        }, ...]                                    }, ...]

                            var data = {                                columns : [...],                                rows : [...]                            };                            grid.setData(data);

                            var columns = [{                                id:"c1",                                type : "string",                                name:"Column Name 1"                            }, {                                id : "c2",                                type : "number",                                name : "Column Name 2"                            }, {                                id: "c3",                                name: "Column Name 3",                                subs: [{                                    id: "c3_s1",                                    name: "Column Name 3-1"                                }, {                                    id: "c3_s2",                                    name: "Column Name 3-2"                                }]                            }];

                            var rows = [{                                id : "r1",                                name : "Row Name 1",                                c1 : "string value 1",                                c2 : 1,                                c3_s1 : "value 3 - 1",                                c3_s2 : "value 1 - 2"                            }, {                                id : "r2",                                type : "group",                                name : "Row Name 2",                                c1 : "string value 2",                                c2 : "value 2",                                c3_s1 : "value 3 - 1",                                c3_s2 : "value 1 - 2",                                subs : [{                                    id : "r3",                                    type : "holding",                                    name : "Row Name 3",                                    c1 : "string value 3",                                    c2 : 3,                                    c3_s1 : "value 3 - 1",                                    c3_s2 : "value 1 - 2"                                }]                            }];

                            var data = {                                options : {                                    sortField : "name"                                },                                columns : columns,                                rows : rows                            };                            grid.setData(data);

                                var data = {                                    columns: columns,                                    rowsLength: 50000                                };                                grid.setData(data);

                        grid.setOption({                            className: "my-grid-class-name"                        });

                                {                                    //selected: Boolean                                    //collapsed: Boolean                                                                    //selectable : true                                    //exportable: true                                                                    //sortFixed: [Boolean, String "top"]                                                                    // customize row style                                    //classMap : [String, Array, Object]                                    //styleMap : [String, Array, Object]                                    //[columnId]ClassMap: [String, Array, Object]                                    //[columnId]StyleMap: [String, Array, Object]                                                                    // row type for class name: group                                    //type: String                                                                    //formatter: [String, Function]                                                                    //height: Number                                                                    //subs: Array                                }

                                {                                    // require for showing header                                    name: '',                                    // for getting row value                                    //id: String                                    // expect to be a string, for example: "string", "number", "date" etc.                                    //type: String                                    // formatter expect to be a function, but also can be a string like type                                    // priority is higher than type                                    // be used for cell formatting                                    //formatter: [String, Function]                                    //headerFormatter: [String, Function]                                    // comparer function when sort function(a, b, options)                                    //comparer: [String, Function]                                    // left (default) | center | right                                    //align: String                                    // customize column style                                    //classMap: [String, Array, Object]                                    //styleMap: [String, Array, Object]                                    //headerClassMap: [String, Array, Object]                                    //headerStyleMap: [String, Array, Object]                                    //sortable: true                                    //resizable: true                                    //exportable: true                                    //private: false                                    // require for column resize                                    minWidth: 81,                                    maxWidth: 300                                    //width: Number                                    //height: Number                                    //subs: Array                                                                    }

                            .tg-pane {}                            .tg-body{}                            .tg-row{}                            .tg-cell{}

                            //rowItem.tg_index                            //rowItem.tg_level                            //rowItem.tg_group