从列标题的下拉列表中,单击“数据类型配置”按钮,您可以选择以下一个数据类型来定义列数据类型。
你可以定义以下任何一个数据类型
Sheet allows user to configure URL in the column to load their defined dropdown list data into the cells under this column. When user double click the cell, sheet load data from customer server by the defined URL and render data to the page.
Select "Date type configure" from column context menu, user can choose "Custom Dropdown List" item and process their configuration.
For example, you can define URL as: fakeData/dropdownList which will return the following json data:
{"results":[{"id":1,"value":"HR Dept"},{"id":2,"value":"Software Dept"},{"id":3,"value":"QA Dept"},{"id":4,"value":"Sale Dept"}],"success":"true"}
Double click the cells under the defined column, the dropdown list window appear with the above data for user to choose.
From APIs, you can use the following code to add CUSTOM DROPDOWN LIST column data type.
{ sheet: 1, row: 0, col: 3, json: { data: "Dept.(Remote)", width: 130, dcfg: "{dt:15, url: \"fakeData/dropdownList\", titleIcon: \"remoteList\"}", ticon:"remoteList" } },
{ sheet: 1, row: 1, col: 3, json: { render:'dropRender', data: 'Software Dept', dropId: 2} },
、、
User can define the contact picker which based on the customer data. It is a kind of data communication between sheet cell and customer existing data.
For example, you have a list of contacts which stay in your server. With this method, you can select one or more contact from popup window and display them into the cell.
From APIs, you can use the following code to add contact picker customer defined column data type.
{ sheet: 1, row: 0, col: 8, json: { data: "Contact picker", width: 170, ticon:"contact", beforeEdit: "_beforeeditcell_" } },
{ sheet: 1, row: 1, col: 8, json: { render:'contactRender', data: "Christina Angela, John Marc", itms: '[{name: "Christina Angela", email: "christina@gmail.com", id: 4}, {name: "John Marc", email: "john@abc.com", id: 9}]' } },
The following code which need to be defined in your code
sheet.on('_beforeeditcell_', function(sheetId, row, col, cellData, sheet){
var contactWin = Ext.create('customer.CellEditor', {
sheetId: sheetId,
row: row,
col: col,
cellData: cellData,
sheet: sheet
});
contactWin.popup();
return false;
}, this);
For number, user can select integer only, and set min value, max value and the default value.
From APIs, you can use the following code to add NUMBER column data type.
{ sheet: 1, row: 0, col: 1, json: { data: "ID", width: 50, dcfg: "{dt:0, io:true, min:0, max:1000, op:0, dv:10, titleIcon: \"number\"}", comment: 'Enter number to auto fill if you know employee ID', commentEdit: "hide", ticon:"number" } },
{ sheet: 1, row: 1, col: 1, json: { data: 1 } },
From APIs, you can use the following code to add CHECKBOX column data type.
{ sheet: 1, row: 0, col: 9, json: { data: "Manager?", width: 100, it: "checkbox", itchk: false, ta: "center", ticon:"checkbox" } }
From APIs, you can use the following code to add EMAIL column data type.
{ sheet: 1, row: 0, col: 4, json: { data: "Email", width: 110, dcfg: "{dt:9}", ticon:"email" } }
User can add attachments, such as file or image, into the cells. Double click the cells and you will be able to add or remove more attachments.
From APIs, you can use the following code to add ATTACHMENT column data type.
{ sheet: 1, row: 0, col: 10, json: { data: "Images", width: 130, dcfg: "{dt:7}", ticon:"image" },
{ sheet: 1, row: 1, col: 10, json: { render:'attachRender', itms: '[{aid: "sUzcT0urG3k_", url: "sheetAttach/downloadFile?attachId=sUzcT0urG3k_", type: "img", name: "blue.jpg"},{aid: "3SvWU3r7f7Q_", url: "sheetAttach/downloadFile?attachId=3SvWU3r7f7Q_", type: "img", name: "green.jpg"}]' } },
User can add dropdown list to the cell, select Single Select column data type and add your list data.
From APIs, you can use the following code to add SINGLE SELECT column data type.
{ sheet: 1, row: 0, col: 6, json: { data: "Gender", width: 80, dcfg: "{dt:13, list: [\"Male\",\"Female\"], drop:{data:[\"Male\",\"Female\"]}}", ticon:"dropdown" } },
{ sheet: 1, row: 1, col: 6, json: { data: 'Male'} },
From APIs, you can use the following code to add DATE column data type.
{ sheet: 1, row: 0, col: 7, json: { data: "Birth date", width: 120, drop: "date", fm: "date", dfm: "F d, Y", ticon:"calendar" } },
{ sheet: 1, row: 1, col: 7, json: { data: '1980-01-15', fm: "date", dfm: "F d, Y" } },
From APIs, you can use the following code to add PERCENT column data type.
{ sheet: 1, row: 0, col: 12, json: { data: "Percent", dcfg: "{dt:12, format: \"0.00%\"}", ticon:"percent" } },
{ sheet: 1, row: 1, col: 12, json: { data: 0.95 } }
Add long text will let you easier to edit your long text in the cell, double click cell you will be able to edit it.
From APIs, you can use the following code to add LONG TEXT column data type.
{ sheet: 1, row: 0, col: 13, json: { data: "Notes", dcfg: "{dt:14, titleIcon: \"textLong\"}", ticon:"textLong" } },
{ sheet: 1, row: 1, col: 13, json: { data: 'This is notes, it is a long text. Double click to edit it.' } }
For currency, user can select the currency symbol from dropdown list. User can also enter decimal places and negative number format.
From APIs, you can use the following code to add CURRENCY column data type.
{ sheet: 1, row: 0, col: 11, json: { data: "Salary", dcfg: "{dt:11, format: \"money|$|2|none|usd|true\"}", ticon:"money_dollar" } },
{ sheet: 1, row: 1, col: 11, json: { data: 81234.5678 } },