Print Page - Many columns in DataList

Title: Many columns in DataList
Post by: shumakosik on August 25, 2016, 11:34:53 PM

Hi! I need display data in two or three columns. I use dataList component. How I make it?

Code:

$('#dataList').datalist({
                      url: '/rest/cb/getParameters',
                      checkbox: true,
                      lines: true,
                      selectOnCheck: false,
                      height: 300
                    });

Title: Re: Many columns in DataList
Post by: stworthy on August 26, 2016, 02:55:53 AM

To display more than one column in datalist, you should custom the 'columns' property.

Code:

$('#dataList').datalist({
	url: '/rest/cb/getParameters',
	checkbox: true,
	lines: true,
	selectOnCheck: false,
	height: 300,
	columns:[[
		{field:'text',width:'50%'},
		{field:'group',width:'50%'}
	]]
});

Title: Re: Many columns in DataList
Post by: shumakosik on August 26, 2016, 03:59:59 AM

My structure json file:

Code:

[
	{"text":"01. Qж авт."},
	{"text":"02. Qж ручн."},
	{"text":"03. Qн авт."},
	{"text":"04. Qн ручн."},
	{"text":"05. Обв.% об. авт.."},
	{"text":"06. Обв.% об. ручн."},
	{"text":"07. Dшт"},
	{"text":"08. Pбуф"},
	{"text":"09. Pлин"},
	{"text":"10. Hдин"},
	{"text":"11. Pпл ВНК (ТМС)"},
	{"text":"12. Pпл ВДП (Hстат.)"},
	{"text":"13. Pпл ВДП (манометр)"},
	{"text":"14. Pпл ВДП (ручн.)"},
	{"text":"15. Pпл ВНК (Hстат.)"},
	{"text":"16. Pпл ВНК (манометр)"},
	{"text":"17. Pпл ВНК (ручн.)"},
	{"text":"18. Pзаб ВНК (ТМС)"},
	{"text":"19. Рзаб ВДП (ручн.)"},
	{"text":"20. Рзаб ВДП (Ман.)"},
]

I need displays this data in two columns in datalist. Is it possible?

Title: Re: Many columns in DataList
Post by: shumakosik on August 26, 2016, 04:06:21 AM

I try this:

Code:

[
	{"text2":"01. Qж авт."},
	{"text":"02. Qж ручн."},
	{"text2":"03. Qн авт."},
	{"text":"04. Qн ручн."},
	{"text2":"05. Обв.% об. авт.."},
	{"text":"06. Обв.% об. ручн."},
	{"text2":"07. Dшт"},
	{"text":"08. Pбуф"},
	{"text2":"09. Pлин"},
	{"text":"10. Hдин"},
	{"text2":"11. Pпл ВНК (ТМС)"},
	{"text":"12. Pпл ВДП (Hстат.)"},
	{"text2":"13. Pпл ВДП (манометр)"},
	{"text":"14. Pпл ВДП (ручн.)"},
	{"text2":"15. Pпл ВНК (Hстат.)"},
	{"text":"16. Pпл ВНК (манометр)"},
	{"text2":"17. Pпл ВНК (ручн.)"},
	{"text":"18. Pзаб ВНК (ТМС)"},
	{"text2":"19. Рзаб ВДП (ручн.)"},
	{"text":"20. Рзаб ВДП (Ман.)"},
]

Code:

$('#dataList').datalist({
                      url: '/rest/cb/getParameters',
                      checkbox: true,
                      lines: true,
                      selectOnCheck: false,
                      height: 300,
                      columns:[[
                        {field:'text',width:'50%'},
                        {field:'text2',width:'50%'}
                      ]]
                    });

But isn't that i need...

Title: Re: Many columns in DataList
Post by: stworthy on August 26, 2016, 07:42:31 AM

Before loading the data into datalist, you can split the original rows into multiple parts and then construct the new rows.

Code:

$('#dataList').datalist({
	data: data,
	checkbox: true,
	lines: true,
	selectOnCheck: false,
	height: 300,
	columns:[[
		{field:'text',width:'50%'},
		{field:'text2',width:'50%'}
	]],
	loadFilter: function(data){
		var total = Math.ceil(data.length/2);
		var rows = data.splice(0, total);
		for(var i=0; i<rows.length && i<data.length; i++){
			rows[i]['text2'] = data[i]['text'];
		}
		return {
			total: total,
			rows: rows
		};
	}
});

Title: Re: Many columns in DataList
Post by: shumakosik on August 28, 2016, 09:56:52 PM

Hi, stworthy. Thanks for help. I try your code, but it's not exactly that I need
I want to split datalist into two columns with checkboxes too.
1 attached file - result of your code
2 attached file - that I need

Title: Re: Many columns in DataList
Post by: stworthy on August 29, 2016, 12:11:38 AM

You can only have one checkbox in one row, but you can split the rows into two parts and display them in two separate datalist components.

Code:

<div style="width:200px;float:left">
	<div id="dataList1" style="width:100%"></div>
</div>
<div style="width:200px;float:left">
	<div id="dataList2" style="width:100%"></div>
</div>

Title: Re: Many columns in DataList
Post by: shumakosik on August 29, 2016, 12:15:26 AM

OK. Thanks ;)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: shumakosik on August 25, 2016, 11:34:53 PM