В предыдущей статье резюме опыта Metronic Development Framework Metronic Development Summarized [i] обзор структуры и модуля меню, некоторые основные резюме структуры разработки начальной загрузки, включая общий эффект интерфейса, а также макет, меню и т. Д.
В отображении интерфейса данных отображение и пейджинг табличных данных являются очень распространенными операциями обработки. Использование макета стиля Bootstrap и обработки данных jQuery, динамическое отображение и подкрепление данных могут быть хорошо достигнуты.
1. Список отображения и обработки пьеса 1) Список отображения данных
На многих страницах нам, как правило, нужно перечислить и лицензировать записи базы данных.
Следующим разделом списка деревьев слева является общая область отображения запросов данных справа, которая разделена на две части: содержание запроса и список данных. Содержание запроса обычно помещается в форму для обработки. Когда пользователь запускает запрос, мы обрабатываем событие и просим соответствующие данные от контроллера на фоне MVC, чтобы вернуть его в передний конец страницы, а также отобразить и плюснуть данные.
Как показано в коде запроса страницы меню, показано следующее.
<form id="ffSearch"> <div> <div> <label>Display name</label> <div> <input name="WHC_Name" type="text"> </div> </div> </div> <div> <div> <label>Function ID</label> <div> <input name="WHC_FunctionId" type="text"> </div> </div> </div> </div> <div> <div> <bakel> Адрес веб -подключения </label> <div> <input name = "whc_url" type = "text"> </div> </div> </div> <div> <div> <babel> значок веб -меню </label> <div> <div> </whc_webicon "type ="> </div> </div> </div> </whc_webicon "
В коде JS страницы мы обрабатываем обработку данных после инициализации страницы, как показано в следующем скрипте.
// Инициализация страницы $ (function () {initJstree (); // Дерево инициализации BindEvent (); // Поиск обработки событий привязки (CurrentPage); // Инициализация данных первой страницы initDictItem (); // Информация словаря инициализации});HTML -код для отображения данных показан ниже. Основное содержание заголовка таблицы отображается, и основной контент таблицы Grid_body динамически создан и отображается сценариями.
<table id="grid" cellpadding="0" cellpacing="0"> <thead id="grid_head"> <tr> <th><input type="checkbox" onclick="selectAll(this)"></th> <th>Display name</th> <th>Sorting</th> <th>Function ID</th> <th>Menu visible</th> <th>Web connection address</th> <th>Web Значок меню </th> <Th> Системный номер </th> <Th> операция </th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </table> <div> <ul id = 'grid_paging'> </ul> </div>
Дисплей данных обрабатывается через функцию поиска после готовности страницы. При обработке сначала передайте условия формы серийного числа и информацию о условиях пейджинга в контроллер MVC, чтобы получить соответствующие данные списка, и динамически свяжите его на интерфейсе, чтобы завершить весь процесс обработки. Конкретный скриншот кода показан ниже.
И код внутри
tr += getActionHtml (item.id);
Затем некоторые кнопки работы генерируются с помощью сценариев, интерфейс выглядит следующим образом.
2) Обработка подключения данных
Данные, отображаемые на нашей странице, как правило, не являются фиксированной записью, поэтому лиц также является необходимой обработкой, которая может улучшить производительность и улучшить удобный пользовательский опыт. Парень для данных обрабатывается с использованием плагина Bootstrap's Bootstrap Paginator. Этот элемент управления много используется и является очень мощным плагином для пейджинг.
Начальник PAGINATATO
Примеры его использования могут быть введены, пожалуйста, см.
При использовании этого элемента управления, после введения стилей jQuery и начальной загрузки и библиотек классов, вы можете добавить и использовать их через следующую строку кода.
<script src = "/js/bootstrap-paginator.min.js"> </script>
Этот контроль под пейджинг может быть реализован путем обращения с Clicked и Clicked и страницей событий.
Чтобы отобразить контент на странице, мы добавляем Div в HTML -код и объявляем элемент UL с помощью идентификационной grid_paging. Код выглядит следующим образом.
<div> <ul id = 'grid_paging'> </ul> </div>
Тогда конкретный код обработки JS выглядит следующим образом.
На фоне MVC нам необходимо получить условия пейджинга и условия формы данных, передаваемые пользователем на линейной странице, чтобы мы могли получить соответствующие данные на основе этих параметров и вернуть их клиенту.
Поскольку эта обработка очень распространена, мы можем поместить ее в контроллер базового класса для обработки. Если требуется специальная обработка, затем переписывайте функцию страниц FindWithPager в контроллере подкласса.
/// <summary> /// Запросить базу данных в соответствии с условиями и вернуть коллекцию объектов (для отображения данных лиц) /// </summary> /// <return> Укажите сбор объекта </return> public virtual actionresult findwithPager () {// проверить, есть ли пользователь разрешение, в противном случае выбрасывает MyDenyAcceSexception Exception Base. Строка где = getPagerCondition (); PAGERINFO PAGERINFO = GETPAGERINFO (); List <t> list = basebll.findwithpager (где, pagerinfo); // json format Требования {total: 22, row: {}} // Создание формата JSON для передачи var result = new {total = pagerinfo.recordCount, row = list}; вернуть tojsoncontentdate (результат); }Среди них getPagerinFo - это получить параметры странификации, передаваемые пользователем. Вы все еще помните параметры URL, обработанные на передней странице выше, как показано ниже.
url = "/menu/findwithpager? Page =" + page + "& row =" + row;
Код реализации конкретной функции контроллера MVC GetPagerinFO выглядит следующим образом.
/// <summary> /// Получить данные объекта странификации в соответствии с параметрами запроса /// </summary> /// <return> </return> Защищенный виртуальный PAGERINFO getPagerInfo () {int pageIndex = request ["page"] == null? 1: int.parse (запрос ["страница"]); int pageSize = request ["row"] == null? 10: int.parse (запрос ["ряды"]); Pagerinfo pagerinfo = new PageRinfo (); pagerinfo.currenetPageIndex = pageIndex; pagerinfo.pagesize = pagesize; вернуть Pagerinfo; }Затем после получения условий формы и условий подрыва, класса бизнес -логики, перенесенного в структуру. Это уже категория поддержки в нижней части структуры и не будет продолжать расширяться.
List <t> list = basebll.findwithpager (где, pagerinfo);
Окончательный эффект интерфейса заключается в следующем
2. Плагин Jstree
Предыдущий раздел также улучшает отображение списков деревьев. В целом, если данные являются иерархическими, то отображение списков деревьев может интуитивно отображать свою структуру. Следовательно, во многих случаях списки деревьев могут помочь нам в классификационном отображении данных.
Например, для пользовательских данных мы можем классифицировать организационную структуру или роль пользователя, и их можно визуально отображаться через списки деревьев, чтобы при поиске различных типов списков пользователей его легко найти.
Или для данных словарного или данных провинции и города, они также могут отображаться через список деревьев.
Официальный адрес управления Jstree - https://www.jstree.com/
Веб -сайт уже дал понять о инструкциях и объяснениях корпуса управления JSTREE. Вообще говоря, мы можем использовать их, ссылаясь на примеры напрямую.
Простой код использования JSTREE выглядит следующим образом
$ (function () {$ ('#jstree_demo_div'). jstree ();});Для событий JStree мы обычно можем связать события через следующий код.
$ ('#jstree_demo_div'). On ("medice.jstree", function (e, data) {console.log (data.selected);});Для JStree мы обычно используем данные JSON для динамического привязки. Определение формата данных этого JSON выглядит следующим образом.
{id: "string" // требуется родитель: "string" // Требуемый текст: "string" // значок текста узла: "String" // строка для пользовательского состояния: {Opened: boolean // - это узел отключен: boolean // - это узел отключен: boolean // - это node selected}, li_attr: {} // attributes for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for for attre // атрибуты для сгенерированного узла}Вообще говоря, мы используем следующий скрипт для очистки и связывания данных.
$ ('#jstree_demo_div'). Data ('jstree', false); // очистить данные, вы должны // связывать данные json asynchrony $ .getjson (url, function (data) {$ ('#jstree_demo_div'). }). Bind ('load.jstree', loadedFunction);});Если нам нужно предоставить пользователю флажок и установить выбранное состояние JStree, эффект интерфейса заключается в следующем.
Затем необходимо изменить общую функцию инициализации, как показано в следующем коде
// Код инициализации jstree с флажком $ .getjson (url, function (data) {control.jstree ({'plugins': ["fackbox"], // коробка выбора «флажок ': {cascade:" ", three_state: false}, // не каскад" Core': {'data': data ", false": {"adpective": {"a expeavive": {"ascivive": {a aysive ": {a aysive"? }). Bind ('load.jstree', loadedfunction);Комбинируя их, мы можем дополнительно уточнить связывание инициализации управления JSTREE в публичную функцию JS BindJStree.
// Инициализируйте управление JSTREE с указанными данными JSON // TreeName - это имя дерева, URL -адрес - это адрес источника данных, флажок - это отображение флажок, загруженная функция - это загруженная функция обратного вызова BINDJSTREE (TREENAME, URL, флажок, загруженная функция) {var CONTROL = $ ('#' + CLOURECHECE CONTROL. Аргументы [2] || ЛОЖЬ; //Set the default value of checkbox to false if(isCheck) { //Initialize the checkbox tree $.getJSON(url, function (data) { control.jstree({ 'plugins' : [ "checkbox" ], //The selection box appears 'checkbox': { cascade: "", three_state: false }, //Not cascaded 'core': { 'data': data, "themes": {"respence": false}}}). Bind ('Loaded.jstree', LoadedFunction); } else {// инициализация обычного списка дерева $ .getJson (url, function (data) {control.jstree ({'core': {'data': data, "themes": {"respencive": false}}}). Bind ('loaded.jstree', loadedfunction);}); }}Следовательно, когда страница связывает jstree, код может быть упрощен
// Инициализировать функцию списка организации initDeptTreeView () {var treeUrl = '/user/getMyDeptJStreejson? UserId =@session ["userId"]'; BindJstree ("jstree_div", treeUrl); // Изменение обработки событий управления деревами $ ('#jstree_div'). On ("medice.jstree", function (e, data) {var icon = data.node.icon; loaddatabyou (data.selected);}); }Для списка флажок код инициализации заключается в следующем.
// Инициализировать все наборы функций всех пользователей var treeUrl = '/function/getRoleFunctionJstreeByuser? UserId =@session ["userId"]'; bindJstree ("tree_function", treeUrl, true); // Разрешения на данные ролей, инициализируйте все отделы First treeUrl = '/user/getMyDeptJStreejson? UserId =@session ["userId"]'; BindJstree ("tree_Roledata", treeUrl, true);Для флажок мы обычно инициализируем данные, а затем устанавливаем выбранное состояние списка дерева по мере необходимости. Это не требует частой инициализации дерева, которая может эффективно улучшить производительность и опыт ответа.
После инициализации списка деревьев нам нужно очистить элементы выбора, а затем установить необходимые элементы выбора. Конкретный код заключается в следующем, обратите внимание на обработку событий UNCHECK_ALL и CHECK_NODE.
// Инициализировать набор разрешений на данные о роле (организация) функция initroLedata (id) {if (id! = ") {Var treeMenu =" tree_roledata "; $ ('#' + treemenu) .jstree ("uncheck_all"); // uncheck All Selection // Тика установленного контента $ .getjson ("/roledata/getroLedatalist? r =" + math.random () + "& roleid =" + id, function (json) {$. treemenu) .jstree ('check_node', item); // select node}); }}При сохранении данных мы получаем список выбора узлов JStree, а затем сохраняем данные. Конкретный код выглядит следующим образом.
// Сохранить функцию разрешения данных о роле saverololedata (roleid) {var oulist = $ ('#tree_roledata'). Jstree ('get_selected'); var url = '/roledata/updatedata? r =' + math.random (); var postdata = {roleid: roleid, oulist: oulist.join (',')}; $ .post (url, postdata, function (json) {initroLedata (roleid);}). error (function () {showtips («Вам не разрешено использовать эту функцию, пожалуйста, свяжитесь с администратором, чтобы обработать ее.»);}); }Хорошо, в конце концов, я представил обычный дисплей данных и подготовку данных; Привязка Jstree, обработка событий, хранение данных и другие операции. Я надеюсь получить вашу постоянную поддержку. Я буду продолжать вводить ключевые моменты, связанные с разработкой начальной загрузки, и использование различных плагинов, чтобы сделать обучение более конкретным и практичным, и могу предоставить нам полезные ссылки на проекты по разработке реальной цены.
Вышеуказанный контент является краткой опытом обработки Metronic Development Framework на основе Bootstrap [2], обработки страниц и подключаемого использования Jstree, я надеюсь, что это будет полезно для всех. Я хотел бы поблагодарить вас за поддержку веб -сайта wulin.com. Я верю, что мы будем добиваться большего успеха!