nest-parrot
Version:
Parrot built on react
1,505 lines (1,493 loc) • 43 kB
JSX
(function (context, $) {
var $demo = $pt.getService(context, '$demo');
var painter = function () {
var modelTemplate = {
items: [
{name: 'Jack', salary: 900},
{name: 'Mary', salary: 1000}
]
};
var model = $pt.createModel(modelTemplate);
var modelCode = $demo.convertModelCreatorToString({
variable: 'model',
template: modelTemplate
});
var compCode = $demo.convertComponentCreatorToString({
tag: 'NTable',
model: 'model',
layout: 'layout'
});
var layoutTemplate = {
label: 'Items',
comp: {
columns: [
{
title: 'Name',
data: 'name'
}, {
title: 'Salary',
data: 'salary'
}
]
}
};
var sort = {
disable: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {sortable: false}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-sort-disable',
title: 'Disable',
desc: 'Sorter can be disabled.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 10
};
},
column: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
sortable: false,
columns: [
{
title: 'Name',
data: 'name',
sort: true
}, {
title: 'Salary',
data: 'salary'
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
var layout2 = $.extend(true, {}, layoutTemplate, {
comp: {
columns: [
{
title: 'Name',
data: 'name',
sort: false
}, {
title: 'Salary',
data: 'salary'
}
]
}
});
var layoutCode2 = $demo.convertCellLayoutCreatorToString({
variable: 'layout2',
cellKey: 'value',
template: layout2
});
var compCode2 = $demo.convertComponentCreatorToString({
tag: 'NTable',
model: 'model',
layout: 'layout2'
});
return {
id: 'table-sort-column',
title: 'Column',
desc: 'Sorter can be enabled or disabled on column level.',
xml: [{
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
}, {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout2)}/>
}],
code: [modelCode, layoutCode, layoutCode2, compCode, compCode2],
index: 20
};
},
number: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
columns: [
{
title: 'Name',
data: 'name'
}, {
title: 'Salary',
data: 'salary',
sort: 'number'
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-sort-number',
title: 'Number',
desc: 'Sort by number.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 30
};
},
function: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
columns: [
{
title: 'Name',
data: 'name',
sort: function (row1, row2) {
return -1 * row1.name.localeCompare(row2.name);
}
}, {
title: 'Salary',
data: 'salary'
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-sort-function',
title: 'Function',
desc: <span>Column sorter can be a function.<br/>
In the following example, name sort is reversed by appointed sort function.
</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 40
};
},
table: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
sorter: function (sort) {
console.log(sort);
if (sort.data) {
sort.data.sort(function (row1, row2) {
return row1.name.localeCompare(row2.name);
});
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-sort-table',
title: 'Function In Table Level',
desc: <span>Sorter function can be defined in table level, then the column level sorter will be skipped.<br/>
In the following example, sort by name anyway. See Console for more information of parameter of sorter function.<br/>
Use this function to sort anyway, including remote sorting.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 50
};
}
};
var edit = {
remove: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {removable: true}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-remove',
title: 'Row Remove',
desc: <span>Row of table can be removable.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 10
};
},
canRemove: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
removable: true,
canRemove: function (model, row) {
console.log(model);
console.log(row);
return false;
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-remove-can',
title: 'Can Remove',
desc: <span>Row of table can be removable. Removing can be stopped by return false by <code>canRemove</code>.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 20
};
},
edit: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
editable: true,
editLayout: {
name: {
label: 'Name',
pos: {
width: 6
}
},
salary: {
label: 'Salary',
pos: {
width: 6
}
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-edit',
title: 'Default Row Edit',
desc: <span>Row of table can be editable.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 30
};
},
editSave: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
editable: true,
onEditSave: function (rowModel, dialog) {
console.log(rowModel);
return (rowModel.get('salary') * 1) <= 4000;
},
editLayout: {
name: {
label: 'Name',
pos: {
width: 6
}
},
salary: {
label: 'Salary',
pos: {
width: 6
}
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-editSave',
title: <span>On Edit Save</span>,
desc: <span>Handle the editing save.<br/>
In the following example, forbidden the save operation if salary is more than 4,000.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 35
};
},
editClick: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
editable: true,
editClick: function (model, rowModel, layout) {
console.log(model);
console.log(rowModel),
console.log(layout);
alert('Catch the edit click.');
},
editLayout: {
name: {
label: 'Name',
pos: {
width: 6
}
},
salary: {
label: 'Salary',
pos: {
width: 6
}
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-editClick',
title: 'Custom Row Edit',
desc: <span>Row of table can be editable. Row editing handler can be customized as a function. See console for more information of paramters.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 40
};
},
add: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
addable: true,
editLayout: {
name: {
label: 'Name',
pos: {
width: 6
}
},
salary: {
label: 'Salary',
pos: {
width: 6
}
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-add',
title: 'Default Row Add',
desc: <span>Row of table can be addable.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 50
};
},
addSave: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
addable: true,
onAddSave: function (rowModel, dialog) {
console.log(rowModel);
return (rowModel.get('salary') * 1) <= 4000;
},
editLayout: {
name: {
label: 'Name',
pos: {
width: 6
}
},
salary: {
label: 'Salary',
pos: {
width: 6
}
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-addSave',
title: <span>On Add Save</span>,
desc: <span>Handle the adding save.<br/>
In the following example, forbidden the save operation if salary is more than 4,000.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 55
};
},
addClick: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
addable: true,
addClick: function (model, rowModel, layout) {
console.log(model);
console.log(rowModel),
console.log(layout);
alert('Catch the add click.');
},
editLayout: {
name: {
label: 'Name',
pos: {
width: 6
}
},
salary: {
label: 'Salary',
pos: {
width: 6
}
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-addClick',
title: 'Custom Row Add',
desc: <span>Row of table can be addable. Row adding handler can be customized as a function. See console for more information of paramters.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 60
};
},
rowOperation: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
rowOperations: [
{
icon: 'ban',
click: function (row) {
console.log(row);
alert('BAN clicked');
}
}, {
icon: 'search',
click: function (row) {
console.log(row);
alert('SEARCH clicked');
}
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-custom',
title: <span>Custom Operations</span>,
desc: <span>Customized operations can be plugged in to row.<br/>
See console for more information of paramters.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 70
};
},
maxRowButton: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
maxOperationButtonCount: 1,
rowOperations: [
{
icon: 'ban',
click: function (row) {
console.log(row);
alert('BAN clicked');
}
}, {
icon: 'search',
click: function (row) {
console.log(row);
alert('SEARCH clicked');
}
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-maxRowButton',
title: <span>Max Row Buttons</span>,
desc: <span>Set <code>maxOperationButtonCount</code> to fix row operation buttons,
more operation button automatically added and show more operation buttons in popover.<br/>
If there is any button declared with no <code>icon</code>, then popover will be renderred as menu style.
Or force to render as menu style by set <code>moreAsMenu</code> to true.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 75
};
},
buttonEnabled: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
rowOperations: [
{
icon: 'ban',
click: function (row) {
console.log(row);
alert('BAN clicked');
},
enabled: {
depends: 'name',
when: function(model) {
return model.get('name') == 'Jack';
}
}
}, {
icon: 'search',
click: function (row) {
console.log(row);
alert('SEARCH clicked');
}
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-buttonEnabled',
title: <span>Button Enabled</span>,
desc: <span>Define <code>enabled</code> in rowOperations to monitor property value to change button enabled.
Default button edit and remove can be set by <code>rowEditEnabled</code> and <code>rowRemoveEnabled</code>.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 76
};
},
rowSelect: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
rowSelectable: 'selected'
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-rowSelect',
title: <span>Row Selection</span>,
desc: <span>A column of row selection can be enabled by set <code>rowSelectable</code>,
it should be a property name of row data JSON.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 80
};
},
dialogButtons: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
editable: true,
addable: true,
dialogResetVisible: true,
dialogValidateVisible: true,
editLayout: {
name: {
label: 'Name',
pos: {
width: 6
}
},
salary: {
label: 'Salary',
pos: {
width: 6
}
}
}
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-dialogButtons',
title: 'Dialog Buttons',
desc: <span>Default buttons reset and validate can be enabled.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 90
};
},
inline: function () {
var Gender = $pt.createCodeTable([{id: 'F', text: 'Female'}, {id: 'M', text: 'Male'}]);
Gender.name('gender');
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
scrollY: 200,
columns: [{
title: 'Name',
data: 'name',
inline: 'text',
width: 150
}, {
title: 'Code',
data: 'code',
width: 150,
inline: {
inlineType: 'cell',
comp: {
type: {type: $pt.ComponentConstants.Text, label: false}
}
}
}, {
data: 'gender',
title: 'Gender',
codes: Gender,
inline: 'select',
width: 150
}, {
// data: 'object_age',
title: 'Age',
width: 150,
inline: {
'object_age': {
comp: {
type: {type: $pt.ComponentConstants.Text, label: false},
placeholder: 'Age'
},
pos: {
width: 6
}
},
'object_lunarAge': {
comp: {
type: {type: $pt.ComponentConstants.Text, label: false},
placeholder: 'Lunar Age'
},
pos: {
width: 6
}
}
}
}, {
title: 'Selected',
data: 'selected',
inline: 'check',
width: 150
}, {
data: 'gender',
title: 'Radio',
codes: Gender,
inline: 'radio',
width: 300
}, {
data: 'birth',
title: 'Date of Birth',
inline: 'date',
width: 200
}]
},
css: {
comp: 'inline-editor'
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-edit-inline',
title: 'Inline Editor',
desc: <span>Inline editor:<br/>
1. Pre-defined: There are 5 pre-defined inline editors. <code>text</code>, <code>select</code>, <code>radio</code>, <code>check</code> and <code>date</code>.
<code>data</code> property of column should be used as data id for cell, and <code>codes</code> used as data options for <code>select</code> and <code>radio</code><br/>
Or register more via <code>NTable.registerInlineEditor(type: string, def: JSON);</code>, <code>def</code> is cell layout format.<br/>
2. Cell Layout: Simply use cell layout JSON, such as <code>inline: {"{}"}</code>. Note in JSON object, <code>inlineType: 'cell'</code> is necessary,
or the JSON object will be treated as option 3.<br/>
3. Form Layout: Use form layout JSON, take care of the CSS, it's very important. Form CSS class name can be defined via additional property <code>__className</code> in JSON.<br/>
4. User <code>rowListener</code> to monitor change of row model. Pattern of <code>rowListener</code> is JSON or an array of JSON, each object format as below,<br/>
4.1 id: string. Property id of row model.<br/>
4.2 time: string. Event time, see ModelInterface.<br/>
4.3 type: string. Event type, see ModelInterface.<br/>
4.4 listener: function(evt). Event listener, see ModelInterface.<br/>
<span className='text-danger'>Note: <br/>
1. NEVER try to wrap lines in cell, if need, customized your own component, DONOT use Table.<br/>
2. NEVER forget the set comp CSS as <code>inline-editor</code> for Table which has inline editor.</span>
</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 100
};
}
};
var scroll = {
y: function () {
var modelTemplate = {
items: [
{name: 'Jack', salary: 900},
{name: 'Mary', salary: 1000},
{name: 'Alice', salary: 1100},
{name: 'Tom', salary: 1000},
{name: 'Taylor', salary: 1000},
{name: 'Raymond', salary: 1000},
{name: 'Sandy', salary: 1000},
{name: 'Nadia', salary: 1000},
{name: 'Whitley', salary: 1000}
]
};
var model = $pt.createModel(modelTemplate);
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
scrollY: 200,
columns: [
{
title: 'Name',
data: 'name',
width: 300
}, {
title: 'Salary',
data: 'salary',
width: 200
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
var modelCode = $demo.convertModelCreatorToString({
variable: 'model',
template: modelTemplate
});
return {
id: 'table-style-scroll-y',
title: 'Y Axis',
desc: <span>Y axis scroll bar can be enabled by set height via <code>scrollY</code>.<br/>
<code>scrollX</code> will be enabled by <code>scrollY</code>, see X Axis for more information.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 10
};
},
x: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
scrollX: true,
columns: [
{
title: 'Name',
data: 'name',
width: 300
}, {
title: 'Salary',
data: 'salary',
width: 200
}, {
title: 'Gender',
data: 'gender',
width: 100
}, {
title: 'Date of Birth',
data: 'dob',
width: 200
}, {
title: 'Age',
data: 'age',
width: 200
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-style-scroll-x',
title: 'X Axis',
desc: <span>X axis scroll bar can be enabled by set height via <code>scrollX</code>.<br/>
Width of columns are required when enable scroll X.<br/>
Be careful to choose the width of columns, it's always a right choice to fill/over whole content of table, not just like the example.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 20
};
},
fixLeft: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
scrollX: true,
fixedLeftColumns: 1,
columns: [
{
title: 'Name',
data: 'name',
width: 300
}, {
title: 'Salary',
data: 'salary',
width: 200
}, {
title: 'Gender',
data: 'gender',
width: 100
}, {
title: 'Date of Birth',
data: 'dob',
width: 200
}, {
title: 'Age',
data: 'age',
width: 200
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-style-scroll-fix-left',
title: 'Fix Left',
desc: <span>Left columns can be fixed by set <code>fixedLeftColumns</code>.<br/>
<code>indexFixed</code>, <code>rowSelectFixed</code> also
can be set as true to fix the index column and row selection column,
and they will not be counted into <code>fixedLeftColumns</code>. Try it.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 30
};
},
fixRight: function () {
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
scrollX: true,
fixedRightColumns: 1,
columns: [
{
title: 'Name',
data: 'name',
width: 300
}, {
title: 'Salary',
data: 'salary',
width: 200
}, {
title: 'Gender',
data: 'gender',
width: 100
}, {
title: 'Date of Birth',
data: 'dob',
width: 200
}, {
title: 'Age',
data: 'age',
width: 200
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-style-scroll-fix-right',
title: 'Fix Right',
desc: <span>Right columns can be fixed by set <code>fixedRightColumns</code>.<br/>
<code>operationFixed</code> also can be set as true to fix the operation buttons column,
and it will not be counted into <code>fixedRightColumns</code>. Try it.</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 40
};
}
}
var style = {
title: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {header: false}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-style-title',
title: 'Title',
desc: 'Hide title.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 10
};
},
style: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {style: 'success'}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-style-stlye',
title: 'Style',
desc: 'Style.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 20
};
},
collapsible: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {collapsible: true, expanded: false}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-style-collapisble',
title: 'Collapsible',
desc: 'An index column can be added in the left.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 30
};
},
index: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {indexable: true}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-style-index',
title: 'Index',
desc: 'An index column can be added in the left.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 40
};
},
scroll: function () {
return {
id: 'table-style-scroll',
title: 'Scroll',
desc: 'Table can be scrollable.',
index: 50,
children: $demo.convertToExampleList(scroll)
}
},
headerAlign: function() {
return {
id: 'table-style-headerAlign',
title: 'Header Align',
desc: <span>Header alignment, use <code>headerAlign: 'center'</code> in <code>columns</code> element, possible value is any value can apply to <code>text-align</code>.</span>,
}
}
};
var pageModelTemplate = {
items: [
{name: 'Jack', salary: 900},
{name: 'Mary', salary: 1000},
{name: 'Alice', salary: 1100},
{name: 'Tom', salary: 1000},
{name: 'Taylor', salary: 1000},
{name: 'Raymond', salary: 1000},
{name: 'Sandy', salary: 1000},
{name: 'Nadia', salary: 1000},
{name: 'Whitley', salary: 1000}
]
};
var pageModel = $pt.createModel(pageModelTemplate);
var pageModelCode = $demo.convertModelCreatorToString({
variable: 'model',
template: pageModelTemplate
});
var page = {
local: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {pageable: true, countPerPage: 5}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-page-local',
title: 'Local',
desc: <span>All data is in local (browser) side. Simply enable the <code>pageable</code> and <code>countPerPage</code>.</span>,
xml: {
width: 12,
xml: <NTable model={pageModel} layout={$pt.createCellLayout('items', layout)}/>
},
code: [pageModelCode, layoutCode, compCode],
index: 10
};
},
remote: function () {
return {
id: 'table-page-remote',
title: 'Remote',
desc: <span>Data is from server side, it's complex and let's follow the steps as below:<br/>
1. The data model of table has a property which named <code>items</code> to store the data array.
Link to NTable component by cell layout definition.<br/>
2. To invoke remote search by pagination buttons, define a <code>{"{comp: {criteria: 'temp'}}"}</code>,
<code>temp</code> is the criteria object, also in data model which contains table data.
So far, the data model of table should be <code>{"{items: [], temp: {}}"}</code>.<br/>
3. Define the initial status of pagination in <code>temp</code>, there are four properties:<br/>
3.a <code>countPerPage</code>, row count of per page.
In remote case, the cell layout attribute <code>countPerPage</code> will be skipped.<br/>
3.b <code>pageIndex</code>, current page index, starts from 1,<br/>
3.c <code>pageCount</code>, total page count, starts from 1,<br/>
3.d <code>url</code>, url for handle the pagination request.
The return data from server must have the same pattern as data model,
in this case, it should be <code>{"{items: [], temp: {}}"}</code>.
For <code>temp</code>, only <code>pageIndex</code> and <code>pageCount</code> is necessary.<br/>
<br/>
Table will merge the returned data from server side to data model automatically, and refresh the display.<br/>
And make sure only one page of data is returned from server side.<br/>
<br/>
4. Or define <code>{"{evt: {pageChange: function(evt)}}"}</code> to handle the pagination request by yourself.
Of course, merge data into table, update table UI by yourself.<br/>
4.a <code>table</code>, current NTable,<br/>
4.b <code>evt</code>, JSON object of last query criteria and event type.<br/>
</span>,
index: 20
};
}
};
var render = {
codes: function () {
var gender = $pt.createCodeTable([{id: 'F', text: 'Female'}, {id: 'M', text: 'Male'}]);
gender.name('gender');
var modelTemplate = {
items: [
{name: 'Jack', salary: 900, gender: 'M'},
{name: 'Mary', salary: 1000, gender: 'F'}
]
};
var model = $pt.createModel(modelTemplate);
var modelCode = $demo.convertModelCreatorToString({
variable: 'model',
template: modelTemplate
});
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
columns: [
{
title: 'Name',
data: 'name'
}, {
title: 'Salary',
data: 'salary'
}, {
title: 'Gender',
data: 'gender',
codes: gender
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-render-codes',
title: 'Code Table',
desc: 'Text get from a code table.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: ["var gender = $pt.createCodeTable([{id: 'F', text: 'Female'}, {id: 'M', text: 'Male'}]);",
modelCode, layoutCode, compCode],
index: 10
};
},
func: function () {
var gender = $pt.createCodeTable([{id: 'F', text: 'Female'}, {id: 'M', text: 'Male'}]);
var modelTemplate = {
items: [
{name: 'Jack', salary: 900, gender: 'M'},
{name: 'Mary', salary: 1000, gender: 'F'}
]
};
var model = $pt.createModel(modelTemplate);
var modelCode = $demo.convertModelCreatorToString({
variable: 'model',
template: modelTemplate
});
var layout = $.extend(true, {}, layoutTemplate, {
comp: {
columns: [
{
title: 'Name',
data: 'name'
}, {
title: 'Salary',
data: 'salary'
}, {
title: 'Gender',
render: function (row) {
return gender.getText(row.gender);
}
}
]
}
});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-render-func',
title: 'Function',
desc: 'Text convert by a function.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: ["var gender = $pt.createCodeTable([{id: 'F', text: 'Female'}, {id: 'M', text: 'Male'}]);",
modelCode, layoutCode, compCode],
index: 20
};
},
css: function () {
return {
id: 'table-render-css',
title: 'Cell CSS',
desc: <span>Cell CSS can be defined via <code>column.css</code>, css class name needs to be defined in CSS files.</span>,
index: 30
};
}
};
var event = {
checkAll: function() {
var layoutTemplate = {
comp: {
rowSelectable: 'check'
},
evt: {
checkAll: function(selected) {
alert('Check All invoked.');
console.log('Check All Selected', selected);
}
}
};
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layoutTemplate
});
return {
id: 'table-event-checkall',
title: 'CheckAll',
desc: 'Capture the check all event.',
code: [layoutCode],
index: 10
};
}
};
var all = {
defaultOptions: function () {
var layout = layoutTemplate;
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-default',
title: 'Default',
desc: 'A simple table. Table is mapping the array table.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 10
};
},
style: function () {
return {
id: 'table-style',
title: 'Style',
desc: 'Styles of table.',
index: 20,
children: $demo.convertToExampleList(style)
};
},
sort: function () {
return {
id: 'table-sort',
title: 'Sort',
desc: 'Sorter can be controlled on table level or column level.',
index: 50,
children: $demo.convertToExampleList(sort)
};
},
search: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {searchable: false}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-search',
title: 'Search',
desc: 'Search is designed to filter on local data since its a fuzzy search which only match the displaying text. And it can be disabled, default is enabled.',
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 60
};
},
download: function () {
var layout = $.extend(true, {}, layoutTemplate, {comp: {downloadable: true}});
var layoutCode = $demo.convertCellLayoutCreatorToString({
variable: 'layout',
cellKey: 'value',
template: layout
});
return {
id: 'table-download',
title: 'Download',
desc: <span>Table content default can be downloaded by download button in panel header.<br/>
Set <code>downloadable</code> as true to enable this feature.<br/>
If table is delared as pageable, download button will send a standard request
(same as pagination request except pageIndex is -1) to server side to get all data and trigger excel exporting.<br/>
And an event <code>download</code> is predefined to handle the download event,
if download is defined in component options, then the standard behavior is ignored.<br/>
Use <code>NTable.DOWNLOADABLE</code> to change the default behavior.
</span>,
xml: {
width: 12,
xml: <NTable model={model} layout={$pt.createCellLayout('items', layout)}/>
},
code: [modelCode, layoutCode, compCode],
index: 61
};
},
render: function () {
return {
id: 'table-render',
title: 'Renderer',
desc: 'Renderer for each columns can be defined.',
index: 65,
children: $demo.convertToExampleList(render)
};
},
edit: function () {
return {
id: 'table-edit',
title: 'Edit',
desc: 'Data in table can be editable.',
index: 70,
children: $demo.convertToExampleList(edit)
};
},
page: function () {
return {
id: 'table-page',
title: 'Pagination',
desc: 'Data in table can be pageable.',
index: 80,
children: $demo.convertToExampleList(page)
};
},
event: function () {
return {
id: 'table-event',
title: 'Event',
desc: 'Event capture',
index: 90,
children: $demo.convertToExampleList(event)
};
},
constants: function () {
var statics = {
TOOLTIP_EDIT: NTable.TOOLTIP_EDIT,
TOOLTIP_REMOVE: NTable.TOOLTIP_REMOVE,
TOOLTIP_MORE: NTable.TOOLTIP_MORE,
/**
* set operation button width
* @param width {number}
*/
setOperationButtonWidth: function (width) {
},
ADD_BUTTON_ICON: NTable.ADD_BUTTON_ICON,
ADD_BUTTON_TEXT: NTable.ADD_BUTTON_TEXT,
DOWNLOADABLE: NTable.DOWNLOADABLE,
DOWNLOAD_BUTTON_ICON: NTable.DOWNLOAD_BUTTON_ICON,
DOWNLOAD_BUTTON_TEXT: NTable.DOWNLOAD_BUTTON_TEXT,
NO_DATA_DOWNLOAD_TITLE: NTable.NO_DATA_DOWNLOAD_TITLE,
NO_DATA_DOWNLOAD: NTable.NO_DATA_DOWNLOAD,
SEARCH_PLACE_HOLDER: NTable.SEARCH_PLACE_HOLDER,
ROW_EDIT_BUTTON_ICON: NTable.ROW_EDIT_BUTTON_ICON,
ROW_REMOVE_BUTTON_ICON: NTable.ROW_REMOVE_BUTTON_ICON,
ROW_MORE_BUTTON_ICON: NTable.ROW_MORE_BUTTON_ICON,
EDIT_DIALOG_SAVE_BUTTON_TEXT: NTable.EDIT_DIALOG_SAVE_BUTTON_TEXT,
EDIT_DIALOG_SAVE_BUTTON_ICON: NTable.EDIT_DIALOG_SAVE_BUTTON_ICON,
SORT_ICON: NTable.SORT_ICON,
SORT_ASC_ICON: NTable.SORT_ASC_ICON,
SORT_DESC_ICON: NTable.SORT_DESC_ICON,
NO_DATA_LABEL: NTable.NO_DATA_LABEL,
INDEX_HEADER_TEXT: NTable.INDEX_HEADER_TEXT,
INDEX_HEADER_WIDTH: NTable.INDEX_HEADER_WIDTH,
DETAIL_ERROR_MESSAGE: NTable.DETAIL_ERROR_MESSAGE,
REMOVE_CONFIRM_TITLE: NTable.REMOVE_CONFIRM_TITLE,
REMOVE_CONFIRM_MESSAGE: NTable.REMOVE_CONFIRM_MESSAGE,
BOOLEAN_TRUE_DISPLAY_TEXT: NTable.BOOLEAN_TRUE_DISPLAY_TEXT,
BOOLEAN_FALSE_DISPLAY_TEXT: NTable.BOOLEAN_FALSE_DISPLAY_TEXT,
PAGE_JUMPING_PROXY: NTable.PAGE_JUMPING_PROXY,
PAGE_JUMPING_PROXY_CALLBACK: NTable.PAGE_JUMPING_PROXY_CALLBACK
};
return {
id: 'table-constants',
title: 'Constants',
desc: <span>Available constants. Constants must be change before construct component.<br/>
<code>NTable.PAGE_JUMPING_PROXY</code> is a function which proxy the page jumping,
before send criteria to remote, set this proxy function to change the format of criteria JSON.<br/>
<code>NTable.PAGE_JUMPING_PROXY_CALLBACK</code> is a function which proxy the page jumping return data callback.
</span>,
index: 900,
code: $demo.convertJSON({
variable: 'NTable',
json: {
statics: statics
}
})
};
},
css: function () {
return $demo.convertCSSJSONToExample({
id: 'table-css',
index: 1000,
css: {
comp: 'your-class-name'
}
});
}
};
return $demo.convertToExampleList(all);
};
var renderer = $pt.getService($demo, 'renderer');
renderer.formTable = function () {
React.render(<ExampleList title='Form Table'
formType='$pt.ComponentConstants.Table'
items={painter()}/>, document.getElementById('main'));
};
}(this, jQuery));