Редактиране на маса MySQL браузър

Потребителят получава към браузъра всички MySQL маса веднага като лист Excel, и може директно да редактират всеки вижда клетка (също и в Excel'e или други електронни таблици).

Изявление на проблема

Задачата е разделен на две части: 1), за да предоставят на разположение за редактиране на съдържанието на избраната клетка; 2) да изпрати промененото съдържание към сървъра, без претоварване на страницата (като тя може да бъде доста голям). При включването на първата част от проблема първо помислих, всеки разработчик, разбира се, ще бъде: "Защо не донесе цялата таблица наведнъж под формата на елементи на входа и на текстовото поле»? За първо приближение, може би бихме могли. Но има някои трудности: а) възниква въпросът дали е необходимо да се направи на целия текст в редактируеми елементи видими без превъртане (и ако е необходимо, как)? б) любимия ни Firefox не обича голям брой редактируеми елементи на една страница (започва да се забави значително и дори нервен). Следователно, първата част, решихме да се оттегли цялата таблица "както е", като обикновен текст (или по-скоро, за HTML), и да направи достъпно за редактиране на текста, по искане на клетъчната (сигнал) потребител.

При избора на такава стратегия ( "динамичен" достъп до текста), също има две възможни решения: 1а) да заменят съдържанието на клетката в елемент текстово поле и поставете текста в елемент директно вътре в клетката; 1б), за да се създаде "поп-нагоре" елемент текстово поле някъде наблизо, в близост до клетката. Избрахме втория вариант, защото е по-гъвкав - удобно показва на цял (ако е възможно, без да превъртат), всички с възможност за редактиране на текст и контрол; те трябва да са най-малко две: на бутона "Save" и "Close" бутона (и в идеалния случай дори повече). Вътре в клетката, да предостави на текст, разбира се, много съблазнително. "Close" (откаже от редактиране) в този случай може да бъде, например, за "естествен", за да избяга. Но как да подражава бутона "Save"? Въведете няма да направи, тъй като може да са необходими само за да достигне ред от текста. Ctrl + Enter очевидно не за всички потребители (тя трябва да се научи) и може да бъде по някаква причина трябва да браузър (и той няма да може тя да се намеси клавишна комбинация). Като цяло, това е необходимо да бъде от ключово значение да се направи (поне за загубата на фокус, в който можете да запишете текста). Въпреки, че в бъдеще ние ще измислим нещо - боли прекалено privelkatelna идея.

В решаването на проблема 2) - да се установи връзка със сървъра, без претоварване на страницата - идва на ум супер-шикозен-Аякс, с които толкова много се носят някои ентусиазирани разработчици. Същата супер-шикозен-Аякс, която всъщност всеки в. р не е необходимо, тъй като тя може напълно да замени стария kondovy вградена рамка. Някъде преди заснемането на филма "И корабът да отплава" някои ср д британски Фелини предложи да работят на истински кораб. "Скоко, галоп?" - попита Фелини, и британците изпратен на едно и също място сме изпратили Аякс. А в края на филма, като показа как един истински майстор може да направи филм без "истински" кораб.

Ние, разбира се, без колебание избра за решаване на любимия ни scriptRequest (). но той може да комуникира само със сървъра, използвайки метода на GET (и следователно не може да изпрати голям размер на текста). Ето защо, за да не претоварват голям страницата, решихме да отворим клетката за редактиране на нов прозорец (с ma-вермилион страница), точно в средата на старите прозорци. Това все още е вградена рамка. Разработчиците като Аякс, по-специално, за това, че там може да се наблюдава при фон изпълнение HTTP заявка, а при неуспех заявка, тя докладва на потребителя (или да извърши друго действие). Ние показваме, че когато използвате вградена рамка Всичко това може да се направи лесно.

Схема на редактирането на маса в браузъра

Достъпът до документа е във вградена рамка

Последно рамка собственост (документ) не се срещна с нас във всеки браузър, където тя не е вече contentWindow. Но след тестване на нашите хипотези в Google, ние решихме по този проект само в случай, добавя също (може би тя е необходимо за по-старите версии на някои IE).

За да "поп-нагоре» вградена рамка страница

Ние вид са сложно живота си, изоставяйки вградена рамка вграждане в редактируем клетка в таблицата. Сега той трябва по някакъв начин много прецизно позициониране, че е възможно да не закриват клетката, а той можеше да види цялото. Но все пак е желателно да се направи размера на само на съдържанието. Това е размерът на вградена рамка трябва да е такава, че неговата документ може да се разглежда, без да превъртат (но не повече). След като получи вградена рамка елемент (editframe) и външен документ, свързан с този елемент (editdoc), за да се изчисли размерът не беше трудно. Само, че е необходимо по време на изчисление, елементът се вижда на страницата (това style.display имот трябва да бъде "никой"):

След намирането ляв горен (позиция от началото на документа) редактира клетка и височина (offsetHeight) и знаейки, височината на формата за редактиране (затворени в вградената рамка), можете да се вземе решение, по-горе или по-долу в клетката, за да покаже формата. Това е средната аритметична. За нея, обаче, ще се наложи (за малко да забравя!) И все пак разстоянието до горния ръб на видимата част (не всички) на документа. След това, за да не мисля за мъже за дълго време, не сме използвали ръба на елемента (клетки), както и на мястото, където е щракване на мишката. Тъй като това (собственост) е един и същ във всички известни браузъри - този имот sobytiyaevent.clientY.

Общата схема за намиране пространствената конструкция е такава:

  1. Измерете разстоянието от едно щракване да поставите горния край на прозореца.
  2. Ако има височина добре с нашата форма за редактиране на вградена рамка, сложи го на 20px над горния ръб на клетката.
  3. Ако не се вписват, ние го постави на 20px под долния ръб на клетката.

И трябва да се сложи, а не с помощта на разстоянието от границата на наказателното поле, а от върха на целия документ (независимо дали то е видимо или не); само за тази цел и че е необходимо да се изчисли абсолютната височина на елемент на страницата. Напълно нашата функция код showframe () е в tableedit.js файл.

Ако модифициран таблицата ще се стесни в средата на екрана с големи полета, изскачащ редактиране форма е силно изместен наляво. Ето защо, правилно, разбира се, в ляво координира форма твърде vychilyat функция getOffsetSum (). Е, ние го остави като е за по-голяма яснота (за да усетите разликата).

Някои функции на SQL заявки

редактиране форма е винаги изпраща данни към сървъра, когато натиснете бутона за изпращане (ние имаме това "Save, за да"). И на PHP сървър скрипт е и изпраща SQL заявка в базата данни. Нещо като "замени текстът на полето в ред R е изпратен на потребителя»: актуализация `$ table` set` $ field` = '$ текст", където `id` =' $ номер". Заявка се счита (ние) да успее, ако данните в таблицата са променени. Но сървъра MySQL няма да промени данните в таблицата, ако:

  • потребителят е изпратена до сървъра, без каквито и да било промени в текста;
  • потребителят се е променило, само случаят писмо;
  • Само потребителят се е променило на HTML тагове.

Във всички тези случаи, с актуализацията няма да се случи, и формата за редактиране ще остане висящ на страницата. Последната точка е, обаче, MySQL-сървър е без значение (той изпълнява PHP). Писмо случай - това може да се конфигурира (по принцип е възможно да се промени заявката само капитализация на SQL-сървър), администратори на бази данни могат да променят тази опция по свое усмотрение.