1. Home
  2. JQuery EasyUI Data Grid - работа колонки

Лучшее руководство по JQuery EasyUI Data Grid - работа колонки в 2024 году. В этом руководстве вы можете изучить Скачать примеры Jquery EasyUI,

JQuery EasyUI Data Grid - работа колонки

В этом уроке, вы узнаете, как включить столбец в работе редактируемой сетки данных (DataGrid) в. Эксплуатационная колонна, как правило, содержит значения от одного или более других операций колонн.

Во-первых, создать изменяемую таблицу данных (DataGrid). Здесь мы создаем некоторую редактируемые колонку, 'ListPrice', 'количество' и '' unitcost столбец, определенный как тип numberbox редактирования. колонка Операция 'unitcost' поле, будет результатом умножения столбца количество ListPrice. 

	<Таблица ID = "ТТ" стиль = "ширина: 600px; высота: авто"
			название = "редактируемые DataGrid с вычисляемый столбец" iconCls = "Значок-редактировать" singleSelect = "истина"
			idField = "Itemid" URL = "Данные / datagrid_data.json">
		<THEAD>
			<Tr>
				<Th поле = "ItemId" ширина = "80"> Item ID </ й>
				<Th поле = "Коек Стоимость" ширина = "80" выровнять = "право" редактор = "{тип: 'numberbox', опции: {точность: 1}}"> Цены </ й>
				<Поле = "количество" ширина Th = "80" выровняйте = "правильный" редактор = "{типа: 'numberbox', опции: {точности: 0}}"> Сумма </ й>
				<Th поле = "unitcost" ширина = "80" выровняйте = "правильный" редактор = "numberbox"> себестоимость единицы продукции </ й>
				<Th поле = "attr1" ширина = "150" Редактор = "Текст"> Атрибут </ й>
				<Th = поле "статус" ширина = "60" выровняйте = "центр" редактор = "{типа:" флажок ", опции: {на: 'Р', от: ''}}"> Статус </ й>
			</ TR>
		</ THEAD>
	</ Table>

Когда пользователь нажимает на строке, мы начали действие редактирования. 

	переменная LastIndex;
	$ ( '# Tt'). Datagrid ({
		onClickRow: функция (RowIndex) {
			если (LastIndex! = RowIndex) {
				$ ( '# Tt') DataGrid ( 'EndEdit', LastIndex) .;
				$ ( '# Tt') DataGrid ( 'BeginEdit', RowIndex) .;
				setEditing (RowIndex);
			}
			LastIndex = RowIndex;
		}
	});

Для того, чтобы создать связь между работой некоторых колонн, мы должны получить текущие редакторы, и связать их с некоторыми из указанных выше событий. 

	Функция setEditing (RowIndex) {
		VAR редакторы = $ ( '# TT') DataGrid ( '' getEditors, RowIndex) .;
		вар priceEditor = редакторы [0];
		вар amountEditor = редакторы [1];
		вар costEditor = редакторы [2];
		priceEditor.target.bind ( 'изменение', функция () {
			вычислить ();
		});
		amountEditor.target.bind ( 'изменение', функция () {
			вычислить ();
		});
		Функция высчитывает () {
			переменная стоимость = priceEditor.target.val () * amountEditor.target.val ();
			$ (CostEditor.target) .numberbox ( "SetValue", стоимость);
		}
	}

Скачать примеры Jquery EasyUI

jeasyui-datagrid-datagrid15.zip

Горячие учебники

Contact US

JQuery EasyUI Data Grid - работа колонки
10/30