DataGrid в EasyUI отображает данные в форме таблицы и обеспечивает богатую функциональную поддержку для выбора, сортировки, группировки и редактирования данных. DataGrid предназначен для сокращения времени разработки и предотвращения получения конкретных знаний разработчиков. Это легкий и богатый функциями. Cell Merge, Multi-Column Title, замороженные колонны и нижний колонн-лишь некоторые из функций.
1. Просмотрите содержание раздела 4
В разделе 4 мы использовали easyui, чтобы построить строку меню слева, и соответствующая вкладка появляется справа, нажав на опцию меню. В этом разделе мы будем использовать DataGrid для завершения раздела TAB справа. Давайте сначала посмотрим на последний файл aindex.jsp в разделе 4 (см. Также содержимое в разделе 4):
2. Несколько способов создания элементов управления DataGrid
Данные отображения DataGrid находятся в формате JSON, поэтому мы должны сначала упаковать данные, полученные из фона в формат Jason, а затем передать их на стойку регистрации, чтобы дать DataGrid отображаться. В этом разделе мы не получим данные из фона. Сначала подготовьте файл .json, который содержит данные в том же формате. Затем мы дадим Datagird отображаться, сначала сделаем функцию отображения хорошо, а затем запросим фоновые данные.
Давайте сначала рассмотрим формат отображения данных DataGrid из справочного документа EasyUI, как показано на рисунке ниже:
Мы смотрим вниз по эталонному документу и обнаруживаем, что пространство данных создается через <table>, и есть три способа его создания:
Первый: Создайте DataGrid из существующего элемента таблицы, определение столбцов, строк и данных в HTML.
Второй тип: Создайте управление DataGrid через тег <table>. Используйте тег <TH>, чтобы определить столбцы в таблице.
Третий тип: используйте JavaScript для создания управления DataGrid.
Мы принимаем третий тип, используя JS для создания управления DataGrid. Во -первых, мы должны подготовить файл, в котором хранятся данные формата JSON. Есть несколько файлов JSON в WebRoot/jquery-asyui-1.3.5/demo/datagrid/. Мы выбираем dataGrid_data1.json, копируем его в каталог WebRoot, изменяем параметры, и позже отобразим данные в этом файле JSON. следующее:
{"total": 10, "row": [{"code": "fi-sw-01", "productName": "koi", "цена": 10.00}, {"code": "k9-dl-01", "ProductName": "Dalmation", "цена": 12,00}, " {«Код»: «RP-SN-01», «ProductName»: «Rattlesnake», «Price»: 12,00}, {«код»: «RP-Li-02», «ProductName»: «Игуана», «Прайс»: 12,00}, {«Код»: «FL-DSH-01», «Продукт»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: «Manx»: {"code": "fl-dsh-01", "productName": "manx", "цена": 12.00}, {"code": "fl-dlh-02", "productName": "персидский", "цена": 12.00}, {"код": "fl-dlh-02", "ProductName": "PESSIAN", "12.00": {"code": "AV-CB-01", "ProductName": "Amazon Parrot", "Price": 92.00}, {"Code": "AV-CB-03", "ProductName": "Amazon Parrot", "цена": 92.00}]}}}}}}}}}}}}}}}}}}}}}}}} Мы видим, что формат данных JSON: «Key1»: значение1, "Key2": value2. Каждое значение может быть массивом, и новые данные Джейсона сохраняются в массиве.
С помощью файла JSON мы можем разработать управление DataGrid Далее. Весь DataGrid разработан в Query.jsp, поскольку отображаемый контент является контентом в Query.jsp. Давайте посмотрим на страницу Query.jsp:
<%@ page language = "java" import = "java.util.*" pageencoding = "UTF-8"%> <! Doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <cead> <%@ include = "/public/jass. $ (function () {$ ('#dg'). DataGrid ({// адрес URL -адреса данных запроса будет изменен, чтобы запросить наш собственный URL -адрес URL: 'dataGrid_data.json', LoadMsg: 'загрузка ......', QueryParams: {type: ''}, // parameters/width: 300, Epplumns: rue: if worily. не будет горизонтальной полосы прокрутки. console.info ("index" + index + "," + row) if (index % 2 == 0) {return 'foanle-color: #ffff;'; Когда ширина превышает 250, будет отображаться стержень прокрутки, но в замороженном столбце нет в штуке прокрутки Frozencolumns: [[{Field: 'Fackbox', флажок: true}, {Поле: 'Код', заголовок: 'Номер', Width: 200}]], // Настройка поля DataGrid // Поле: Название, которое отображается для людей для просмотра столбцов: [[{Field: 'ProductName', заголовок: «Имя категории», ширина: 100, // Использование для форматирования значения текущего столбца, возвращение является окончательным форматером данных: функция (значение, row, index) {return "<pan>" + value + "</span>"; }}, {Field: 'Price', title: 'Price', ширина: 100, Styler: function (значение, row, index) {// Установить стиль текущей ячейки, а возвращаемая строка непосредственно передается атрибуту стиля // console.info ("val:" + value + ", row:" + row + ", index:" + index) if (value <20) {return '; }}}]]}); }); </script> </head> <body> <table id = "dg"> </table> </body> </html>3. Свойства управления DATAGRID
Мы можем видеть, что если вы используете JS для создания управления DataGrid, вам нужен только тег <table>, который в основном выполняется в JS. Элементы управления DataGrid очень мощные. Здесь мы в основном делаем основные дисплеи. Для большего количества других функций, пожалуйста, обратитесь к документам EasyUi по разработке. Сейчас мы проводим анализ в файле Query.jsp выше:
Прежде всего, элемент управления DataGrid имеет два свойства: одно является свойством DataGrid, а другой - это Свойство столбца . Как следует из названия, свойство DataGrid является атрибутом, добавленным ко всему управлению DataGrid, а свойство столбца предназначено для определенного столбца. В каждом из них есть много атрибутов, и здесь сделаны только некоторые основные и широко используемые атрибуты.
Наиболее важной вещью в свойстве DataGrid является свойство столбцов, которое представляет собой массив, который может создавать несколько столбцов, см. Скриншот ниже:
Давайте посмотрим на детали в атрибуте столбцов:
В атрибуте столбца поле представляет имя поля, соответствующее ключу данных JSON, а затем заголовок - это заголовок, который будет отображаться для пользователя. Смотрите файл Query.jsp. Есть некоторые другие основные атрибуты, которые могут быть направлены на документ EasyUI. Двумя более важными и обычно используемыми свойствами в свойствах столбцов являются форматер и стилера, которые используются для форматирования значения текущего столбца и установить стили ячейки. Давайте в основном посмотрим на эти два свойства:
Давайте подробно проанализируем, как использовать эти два свойства столбцов в атрибуте столбцов в Query.jsp выше:
{Field: 'ProductName', название: «Имя категории», ширина: 100, // Использование для форматирования значения текущего столбца, возвращение является окончательным форматером данных: функция (значение, строка, индекс) {return "<pan>" + value + "</span>"; // set, чтобы надеть мышь и отображать значение}}, {Field: ', title: function (value, row, index) {// установить стиль текущей ячейки, а возвращаемая строка непосредственно передается атрибуту стиля // console.info ("val:" + value + ", row:" + row + ", index:" + index) if (value <20) {// Если значение значения меньше 20 return 'color: red;'; // показать значение красным}}}Затем давайте посмотрим на некоторые свойства управления DataGrid:
URL представляет источник данных, который будет отображаться. Установить как dataGrid_data.json здесь означает, что источник данных - это файл JSON и размещен в каталоге WebRoot;
LoadMSG представляет информацию, отображаемую во время загрузки данных;
Queryparams означает параметры, передаваемые на фон, и нельзя использовать здесь, потому что мы еще не связаны с фоном, а только отображают файл JSON, который будет использоваться позже;
После того, как Fitcolums установит True, это означает, что горизонтальное расширение будет автоматически расширено горизонтально, и ширина адаптивной сетки будет адаптирована. Таким образом, в горизонтальном направлении не будет прокрутки, и нет необходимости устанавливать ширину;
Ширина - ширина. Если данные слишком длинные и не могут быть отображены, в горизонтальном направлении появится полоса прокрутки;
После того, как Полоса установлен на True, это означает, что отображается пересечение зебры. Это стиль дисплея. Просто попробуйте;
Если Nowrap установлен на True, это означает, что когда данные слишком много, он не будет обернут в строки, в противном случае, когда будет слишком много данных на определенной строке, это будет уродливым;
Когда страница установлена на TRUE, это означает, что функция пейджинга включена;
Когда SingleSelect устанавливается на True, можно проверить только отдельные ряды. Функция выбора всякая функция недействительна и в основном используется для флажков в переднем столбце;
Frozencolums - это установить замороженные столбцы, а столбцы, установленные в Frozencolums, не изменят размер. Если {Field: 'fackbox', флажок: true} установлен, это означает, что это столбец флактора, который выбран для пользователя. Если установлен вышеупомянутый SingleSelect, то можно выбрать только один, а не все из них;
Rowstyler - это стиль всех рядов. Два параметра являются индексом строки и строкой. Вышеупомянутое установлено, что даже ряды белые и нечетные ряды желтые.
Подождите ... Есть и другие свойства элементов управления DataGrid, вы можете обратиться к технической документации EasyUI, и я не буду объяснять их здесь один за другим.
4. Эффект отображения данных DataGrid
Хорошо, после завершения Query.jsp мы перезагружаем Tomcat, затем вводим фон, нажимаем на управление категорией в строке меню слева, и вкладка управления категорией будет отображаться справа, а затем будут отображаться данные JSON, которые мы указали. Эти данные Джейсона сами помещаются в каталог WebRoot. Позже мы будем интегрировать JSON и Struts, чтобы динамически получить данные JSON, передаваемые с фона.
(Примечание: В конце концов, я предоставлю исходный код загрузку всего проекта! Приглашаем ли каждый сбор или поделиться)
Оригинальный адрес: http://blog.csdn.net/eson_15/article/details/51322262
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.