ПРЕДИСЛОВИЕ: Когда я вводил начальный компонент ранее, я упоминал его встроенную функцию редактирования, но с целью отображения этой функции я взял это и сказал, что это грех! Недавно я все еще планирую использовать встроенное редактирование в проекте, поэтому я снова изучил X-Eleveable Component. Я столкнулся с некоторыми ловушками, так что давайте записываем здесь ямы! Друзья, которые хотят знать о Bootstraptable, могут перейти в серию компонентов JS - Артефакт таблицы: столик начальной загрузки.
1. Введение в x-edible component
Компонент X-Eledible-это плагин для создания редактируемых всплывающих коробок. Он поддерживает три стиля: Bootstrap, jQuery UI и jQuery. Общий эффект заключается в следующем:
Согласно обычному стилю блоггера, первый должен быть выбран здесь. Во -первых, дайте адрес с открытым исходным кодом.
x-ediable Адрес с открытым исходным кодом: https://github.com/vitalets/x-editable
x-ediable Document Адрес: http://vitalets.github.io/x-editable/docs.html
X-Edible Online Demo: http://vitalets.github.io/x-editable/demo-bs3.html
1. Первый опыт X-Edible
Сначала загрузите исходный код на основе начальной загрузки в локальную область. Ссылки на соответствующие файлы.
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-eeditable/css/bootstrap-edible.css" rel = "stylesheet"/> <script src = "/scripts/jquery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-editable/js/bootstrap-edable.js"> <//script>
Элементы страницы
Скопируйте код следующим образом: <a href = "#" id = "username" data-type = "text" data-title = "username"> имя пользователя </a>
Инициализация JS
$ (function () {$ ('#username'). editable ();});Эффект дисплей
Выше приведено, чтобы установить параметры X-Eledible через атрибут данных HTML. Конечно, я также могу установить параметры во время инициализации. Например, я просто даю пустой тег: <a href = "#" id = "username"> имя пользователя </a>
Инициализация JS
$ (function () {$ ('#username'). editable ({type: «text», // Тип блока редактирования. Всплывающий и встроенный режим, по умолчанию всплывающее окно: function (значение) {// проверка поля if (! $.Посмотреть эффект
Давайте немного более сложным
<a href = "#" id = "Департамент"> выберите отдел </a>
$ (function () {$ ('#Department'). Editable ({type: «select», // Тип флажок редактирования. «Выберите отдел», // заголовок поля редактирования отключено: false, // не отключить редактирование пустого текста: «Пустой текст», // текстовый режим по умолчанию пустого значения: «всплывающее окно», // Режим редактирования: поддержает всплывающее устройство и встроенный режим, по умолчанию - возврат: function (значение) {// Field If (! $. });Посмотреть эффект
Приведенная выше статья дает только некоторые часто используемые поля. Конечно, x-Eledible Component имеет много других функциональных параметров. Если вам интересно, вы можете проверить документацию. Официальная документация имеет подробные описания для каждого параметра.
2. Bootstraptable Pirom
После долгого разговора, вышеупомянутое - просто прелюдия. В конечном итоге мы надеемся внедрить встроенное редактирование в Bootstraptable. Согласно вышеуказанным правилам, если мы хотим использовать X-Elebitable для реализации встроенного редактирования, в ячейке таблицы должен быть тег, а затем инициализируется тег A. С этой идеей давайте сначала попробуем.
Цитируйте связанные файлы
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-eeditable/css/bootstrap-edible.css" rel = "stylesship"/> <link href = "/content/bootstrap-table/bootstrap-table. rel = "styleSheet"/> <script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-edible/js/bootstrap-editable.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-z-cnh-cn.js>
Связанная инициализация Bootstraptable
<script type = "text/javascript"> var currow = {}; $ (function () {$ ("#tb_user"). Bootstraptable ({wbar: "#toolbar", idfield: "id", pagination: true, showrefresh: true, search: true, clicktoselect: true, queryparams: function (parame) {return {};}, url: "/edtable/getUss: everate: {};}; {Поле: «Имя пользователя», заголовок: «Имя пользователя», форматер: функция (значение, row, index) {return »<a href =/"#/"name =/" username/"data-type =/" text/"data-pk =/" + row.id + "/" data-title =/"unerame/"> " + value +" </a> «AGE»,}, {Field: «День рождения», название: «День рождения», Форматер: Функция (значение, row, index) {var date = eval («новый». OnClickRow: function (row, $ element) {currow = row; «Редактировать/редактировать», Data: Currow, DataType: 'json', успех: функция (Data, TextStatus, JQXHR) {Alert ('Сохранить успешно!');Бэкэнд метод
Метод фонового тестирования
public jsonResult getUsers () {var lStres = новый список <user> (); LSTRES.Add (new user () {id = "1", username = "Zhang San", возраст = 22, день рождения = Convert.TodateTime ("1994-12-21"), DeptId = "1", deptName = "Отдел R & D"}); LSTRES.Add (new user () {id = "2", username = "li si", возраст = 28, день рождения = преобразовать. LSTRES.Add (new user () {id = "3", username = "Wrestle Coat jodle", возраст = 40, день рождения = Convert.todateTime ("1976-09-01"), deptid = "2", deptname = "Отдел продаж"); lstres.add (new user () {id = "4", username = "Lightning Crawn", возраст = 37, день рождения = Convert.todateTime ("1979-03-12"), deptId = "4", deptName = "Creative Department"}); lStres.Add (new user () {id = "5", userName = "han meimei", возраст = 29, день рождения = конверт.todateTime ("1987-05-01"), deptId = "5", deptname = "Департамент бизнеса"}); Вернуть JSON (LSTRES, JSONREQUESTBEHAVIOR.Allowget); } public jsonResult edit (пользователь пользователя) {// Обновление возврата после десериализации json (new {}, jsonRequestbehavior.allowget); }Это действительно может достичь желаемого эффекта, и кажется, что его также можно отредактировать в строке, но если нет столбцов, которые требуют редактирования в строке, и есть много столбцов, то требуется ли каждому столбцу форматирование одинакового пути? И этот вид письма, очевидно, жесткий, что действительно трудно принять блоггерам. Поэтому я искал пример и обнаружил, что JS Bootstrap-Table-Edible.js существует в расширении Bootstraptable.
3. Bootstraptable Editing Final Plan
Что ж, блоггер признает, что вышеуказанное все еще является прелюдией, потому что блоггер считает, что это может быть общей идеей для решения проблемы, поэтому длина этих прелюдий может быть слишком большой. Во-первых, давайте посмотрим на файл Bootstrap-Table-edible.js:
/** * @author zhixin wen <[email protected]> * расширения: https://github.com/vitalets/x-editable */! function ($) {'strict'; $. причина) {вернуть false; $. var bootstraptable = $ .fn.bootstraptable.constructor, _inittable = bootstraptable.prototype.inittable, _initbody = bootstraptable.prototype.initbody; Bootstraptable.prototype.inittable = function () {var that = this; _inittable.apply (this, array.prototype.slice.apply (аргументы)); if (! this.options.editable) {return; } $. column.field + '' '', 'data-pk = "' + row [that.options.idfield] + '' ',' data-value =" ' + result +' '', '>' + '</a>'] .join ('' ');};}); }; Bootstraptable.prototype.initbody = function () {var that = this; _initbody.apply (это, array.prototype.slice.apply (аргументы)); if (! this.options.editable) {return; } $. $ (this) .parents ('tr [data-index]'). '"]'). редактируемый (column.editable) .off ('infed'). on ('shod’, function (e, editable) {var data = that.getData (), index = $ (this) .parents (' tr [data-index] '). Data (' index '), row = data [index]; this.trigger (' edaitable-shown ', this); это. $ body.find ('a [data-name = "' + column.field + '"]'). редактируемое (column.editable) .off ('hidden'). On ('hidden', function (e, разум) {var data = that.getData (), index = $ (this) .parents ('tr.dex]'). Data ('index). that.trigger ('редактируемый this.trigger ('reditable-init'); };} (jQuery);
Этот JS фактически делает простую инкапсуляцию X-Edible, добавляя редактируемые атрибуты столбцов, редактируя и сохраняя некоторые события. С учетом этого кода, который мы отредактировали в отрасли, стал таким.
Файлы, на которые необходимо ссылаться, следующие:
<link href = "/content/bootstrap/css/bootstrap.min.css" rel = "stylesheet"/> <link href = "~/content/bootstrap3-eeditable/css/bootstrap-edible.css" rel = "stylesship"/> <link href = "/content/bootstrap-table/bootstrap-table. rel = "styleSheet"/> <script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "~/content/bootstrap3-edible/js/bootstrap-editable.js"> </script> <script src = "~/content/bootstrap-table/bootstrap-table.js"> </script> <script src = "/content/bootstrap-table/locale/bootstrap-table-z-cn.js> zripplap/scipt-table/sacilale/souptrap-table-z-cn. src = "/content/bootstrap-table/src =" ~/content/bootstrap-table/extensions/editable/bootstrap-table-editable.js "> </script>
1. Текстовое поле
$ (function () {$ ("#tb_user"). Bootstraptable ({wbar: "#toolbar", idfield: "id", pagination: true, showrefresh: true, search: true, clicktoselect: true, queryparams: function (parame) {return {};}, url: "/edtable/getUss: everate: {};}; {Поле: «Имя пользователя», заголовок: «Имя пользователя», редактируемое: {тип: 'text', заголовок: «Имя пользователя», проверка: функция (v) {if (! V) возвращение «Имя пользователя не может быть пустым»; Eval («Новый» + Eval (значение) .source) Дата возврата.format ("yyyy-mm-dd"); «/Редактировать/редактировать», Data: row, dataType: 'json', успех: function (data, status) {if (status == "успех") {alert ('Успешное представление данных');Соответствующий метод обновления фона
public jsonResult edit (пользователь пользователя) {// Обновление объекта return json (new {}, jsonrequestbehavior.allayget); }После тестирования столбец имени пользователя можно отредактировать свободно. Точно так же возрастная колонка также может быть изменена на это
{Field: «Возраст», заголовок: «Возраст», редактируемый: {type: «text», название: «возраст», проверка: function (v) {if (isnan (v)) возврат «возраст должен быть числом»; var age = parseint (v); Если (возраст <= 0) возврат «Возраст должен быть положительным целым числом»; }}}Модификация не требуется для остальных.
Объяснение кода: редактируемые параметры настроены в атрибуте начальных столбцов выше. Обратите внимание, что объект JSON, соответствующий редактируемому атрибуту каждого столбца здесь, является инициализированным объектом JSON в X-EdiTable. То есть какие атрибуты могут быть настроены, когда мы инициализируем X-Eledible, и то же самое можно настроить в редактируемом атрибуте столбца, поэтому его будет гораздо более приятным в использовании. Отредактированный метод отправки одинаково размещен в событии OneDitablesave, чтобы обработать его равномерно.
2. Время выбора коробки
С приведенным выше знанием в качестве основы, давайте инициализируем столбец на день рождения:
{Поле: «День рождения», заголовок: «День рождения», форматер: функция (значение, row, index) {var date = eval ('new' + eval (value) .source) Дата возврата.format ("yyyy-mm-dd"); }, редактируемый: {type: 'date', title: 'День рождения'}}Модификации не требуются в другом месте, чтобы получить эффект:
Это стиль по умолчанию X-Edible. Если вы не чувствуете себя счастливым, вы можете настроить это самостоятельно. X-Editable предоставляет множество параметров для настройки поксов даты, следующим образом:
Конечно, если время точное время, минуты и секунды, вы можете использовать поле для редактирования типа DateTime. Ниже приводится официальный эффект редактирования сроков, который выглядит довольно хорошо.
3. Потяните коробку
Есть еще один важный тег в редактировании форм, который выбирается. Как упомянуто выше, мы знаем, что X-Edible предоставляет нам режим редактирования раскрывающегося коробки, например, редактирование этого столбца в нашем отделе может быть написано так:
{Field: «deptid», название: «Отдел», редактируемое: {type: «select», название: «Отдел», источник: [{value: «1», текст: «R & D Department»}, {value: «2», текст: «Отдел продаж»}, {value: «3», «Административный отдел»}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}Получите эффект
Конечно, этот метод установки источников данных локально не может удовлетворить наши потребности, потому что во многих случаях параметры в раскрывающемся поле получают удаленно из базы данных. Конечно, X-Editable также рассматривался для нас, например, мы можем написать это:
{Field: «deptid», название: «Отдел», редактируемое: {type: 'select', title: 'department', source: function () {var result = []; $ .ajax ({url: '/editable/getDepartments', async: false, type: "get", data: {}, успех: function (data, status) {$ .each (data, function (keal, value) {result.push ({value: value.id, text: value.name});});}); результат возврата; }}}}Мы настраиваем метод в фоновом режиме
public jsonResult getDepartments () {var lStres = новый список <департамент> (); lstres.add (new Department () {id = "1", name = "R & D Department"}); lstres.add (new Department () {id = "2", name = "Отдел продаж"}); LSTRES.Add (new Department () {id = "3", name = "Административный отдел"}); lstres.add (new Department () {id = "4", name = "Creative Department"}); lstres.add (new Department () {id = "5", name = "Business Unit"}); Вернуть JSON (LSTRES, JSONREQUESTBEHAVIOR.Allowget); }Это также может достичь желаемых результатов.
Кодовый вопрос: вот одна вещь, которую нужно объяснить. Осторожные садовники могли обнаружить, что наша область: «Deptid» здесь, почему мы должны настроить Deptid вместо DeptName? Это очень просто, потому что мы должны соответствовать значению значения в источнике данных.
4. Флажок
В дополнение к общим коробкам редактирования, упомянутым выше, X-Edible также предоставляет нам редактирование групп флажков. например:
{Field: «Hobby», название: «host», edable: {type: «контрольный список», сепаратор: «», «Источник: [{value: 'bsb', текст: 'баскетбол'}, {value: 'ftb', текст: 'Football'}, {value: 'wsm', text: 'Swamp'},}}}}}}}}}}}}Получите эффект:
Конечно, если у вас есть удаленные данные, вы также можете использовать метод, аналогичный вышеуказанному, для его извлечения.
5. «Призраки никогда не исчезают» Select2
Говоря о флажке выше, блоггер не мог не думать о таких вещах, как Multilect, поэтому он искал X-Edible Document и обнаружил, что он не поддерживает MultiSelect, но поддерживает Select2, и я не знаю, хорошие ли это новости. Основываясь на собственном опыте использования блоггера и опыте чата в группе технических коммуникаций, я обнаружил, что многие люди сталкиваются с различными проблемами стиля при использовании Select2, и его нелегко решить.
Поскольку x-ediable поддерживает Select2, давайте попробуем. Во всяком случае, официальная демонстрация довольно хороша. Вот пример использования официальной демонстрации:
С нервным настроением блоггер сам это попробовал.
Ссылка SELECT2 Файл
<link href = "~/content/select2-bootstrap.css" rel = "styleSheet"/> <link href = "~/content/select2-master/dist/css/select2.min.css" rel = "stylesheet"/> <script src = "~/content/select2/dist/js/select2.
Код попробуйте
{Field: «Hobby», название: «Hobby», редактируемое: {type: 'select2', название: «Hobby», имя: «Hobby», «Place»: «top», успех: функция (ответ, newvalue) {отладчик; }, ошибка: function (response, newvalue) {Debugger; }, url: function (params) {Debugger; }, Источник: [{id: 'bsb', text: 'баскетбол'}, {id: 'ftb', text: 'football'}, {id: 'wsm', текст: 'плавание'}], inputclass: 'input-large', select2: {allowcle: trup, womlet: true,}}}}}}}}}}}}}}}}}}Получите результат:
Оказывается, что выбранное значение Select2 не может быть передано на фон нормально. Во всяком случае, блогер попробовал различные параметры и, согласно официальной демонстрации, и все они закончились неудачей. Я не знаю, как официальная демонстрация была успешной. Этот вопрос впервые выброшен. Если есть садовники, которые используют его, пожалуйста, исправьте и ответьте на него. Если блоггер решит эту проблему в будущем, она также будет обновлена здесь.
4. Резюме
Другая проблема заключается в том, что после завершения редактирования и представления, блоггер столкнулся с проблемой в проекте: если после подачи слишком много текстового контента, ширина TH в головке таблицы и ширина TD в TBODIS не правильно, что выглядит довольно отвратительно. Но я не сталкивался с этой проблемой при написании демонстраций. Вот решение.
Решите свои проблемы только в одном предложении!
В этой статье представлено использование Bootstraptable в сочетании с X-Edible для реализации встроенного редактирования. Многие из вопросов в статье объясняются на основе опыта блогера по его использованию. Если вы планируете использовать его, вы также можете попробовать.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше всего об этой статье. Я надеюсь, что это поможет вам лучше узнать стол с компонентом таблицы JS.