jEasyUI는 열을 동적으로 변경합니다.


DataGrid 열은 'columns' 속성을 사용하여 간단히 정의할 수 있습니다. 열을 동적으로 변경하려는 경우 전혀 문제가 되지 않습니다. 열을 변경하려면 DataGrid 메서드를 다시 호출하여 새 열 속성을 전달하면 됩니다.

Create DataGrid

	<table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:550px;height:250px"
			url="data/datagrid_data.json"
			singleSelect="true" iconCls="icon-save">
	</table>
	$('#tt').datagrid({
		columns:[[
			{field:'itemid',title:'Item ID',width:80},
			{field:'productid',title:'Product ID',width:80},
			{field:'attr1',title:'Attribute',width:200},
			{field:'status',title:'Status',width:80}
		]]
	});

웹 페이지를 실행하면 다음이 표시됩니다.

45.png

하지만 때로는 열을 변경하고 싶기 때문에 일부 코드를 작성해야 합니다.

	$('#tt').datagrid({
		columns:[[
			{field:'itemid',title:'Item ID',width:80},
			{field:'productid',title:'Product ID',width:80},
			{field:'listprice',title:'List Price',width:80,align:'right'},
			{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
			{field:'attr1',title:'Attribute',width:100},
			{field:'status',title:'Status',width:60}
		]]
	});

다음과 같은 다른 속성을 이미 정의했다는 것을 기억하세요. : URL, 너비, 높이 등 우리는 그것들을 다시 정의할 필요가 없으며, 우리가 변경해야 할 것들을 정의합니다.

46.png

jeasyui-datagrid-datagrid6.zip

jeasyui-datagrid-datagrid6.zip을 다운로드하세요