Скрещиваем jqGrid и FCKeditor

Есть прекрасный программный продукт jqGrid. У него есть неплохой функционал по редактированию данных в таблице, вот только нет возможности редактировать текст через какой-либо визуальный редактор, например FCKeditor.

Почему FCKeditor?
Во первых он достаточно стабилен, во вторых его легко настроить под себя, и наверное самое главное у меня был опыт работы с ним.

Поиск в интернете ничего мне не дал, … значить придется все делать самому.

Все оказалось на удивление просто

<script type="text/javascript" src="/js/lib/fckeditor/fckeditor.js"></script>

<script type="text/javascript">
$(document).ready(function(){
 $("#news-list").jqGrid({
  ...некоторый ваш код...
 }).navGrid('#news-pager',
  {refresh:true,add:true,edit:true,del:true,search:true},
  {
   // edit parameters
   width: 500,
   reloadAfterSubmit:true,
   beforeShowForm: function() {
    fckeditor('text');
   },
   onclickSubmit: function() {
    var oEditorText = FCKeditorAPI.GetInstance('text');
    return {
     text: oEditorText.GetHTML()
    };
   }
  },
  {
   // add parameters
   reloadAfterSubmit:true,
   beforeShowForm: function() {
    // Перед тем как показать форму, вставляем в элемент с id='text' наш редактор
    fckeditor('text');
   },
   onclickSubmit: function() {
    // Получаем введенный и отформатированный текст в редакторе
    var oEditorText = FCKeditorAPI.GetInstance('text');
    // Возвращаем его в виде html текста
    return {
     text: oEditorText.GetHTML()
    };
   }
  },
  {
   //delete parameters
  }
 );

 function fckeditor(id) {
  var oFCKeditor = new FCKeditor(id) ;
  oFCKeditor.ReplaceTextarea();
 }
});
</script>

<h1><?=_('Новости')?></h1>

<div class="grid">
 <table id="news-list" class="scroll"></table>
 <div id="news-pager" class="scroll"></div>
</div>

А вот так это выглядит в работе

http://ajaxblog.ru/246

Справочники, и как в них искать

Есть три основных справочника по JavaScript на английском языке:

1. Mozilla Developer Network — содержит информацию, верную для основных браузеров. Также там присутствуют расширения только для Firefox, они помечены.
   Когда мне нужно быстро найти «стандартную» информацию по RegExp - ввожу в Google«RegExp MDC», и ключевое слово «MDC» (Mozilla Developer Center) приводит к информации из этого справочника.
2. MSDN — справочник от Microsoft. Там много информации, в том числе и по JavaScript (они называют его «JScript»). Если нужно что-то, специфичное для IE - лучше лезть сразу туда.
   Например, для информации об особенностях RegExp в IE - полезное сочетание: «RegExp msdn». Иногда к поисковой фразе лучше добавить термин «JScript»: «RegExp msdn jscript».
3. Safari Developer Library](https://developer.apple.com/library/safari/navigation/index.html) — менее известен и используется реже, но в нём тоже можно найти ценную информацию.

Есть ещё справочники, не от разработчиков браузеров, но тоже хорошие:

1. http://help.dottoro.com — содержит подробную информацию по HTML/CSS/JavaScript.
2. http://javascript.ru/manual — справочник по JavaScript на русском языке, он содержит основную информацию по языку, без функций для работы с документом. К нему можно обращаться и по адресу, если знаете, что искать. Например, так: http://javascript.ru/RegExp.
3. http://www.quirksmode.org — информация о поддержке тех или иных возможностей и несовместимостях.
   Для поиска можно пользоваться комбинацией «quirksmode onkeypress» в Google.

Создание и работа со свойствами

Объекты (они же - ассоциативные массивы, хэши) и работа с ними в Javascript - реализованы не так, как в большинстве языков. С этим связано много ошибок и непоняток.

В этой статье описаны базовые свойства объектов javascript, создание и изменение, перечисление свойств и т.п.

Объект в javascript представляет собой обычный ассоциативный массив или, иначе говоря, "хэш". Он хранит любые соответствия "ключ => значение" и имеет несколько стандартных методов.

Метод объекта в javascript - это просто функция, которая добавлена в ассоциативный массив. Далее - подробнее.

Создание и работа со свойствами

Создание объекта

Следующие два варианта создания объекта эквивалентны:

// эквивалентные записи

var o = new Object()

var o = {}

Добавление свойств

Есть два синтаксиса добавления свойств в объект. Первый - точка, второй - квадратные скобки:

// эквивалентные записи

o.test = 5

o["test"] = 5

Квадратные скобки используются в основном, когда название свойства находится в переменной:

var name = 'test'

o[name] = 5

Здесь имя свойства "test" является ключом в ассоциативном массиве, по которому лежит значение 5.

Доступ к свойствам

Доступ к свойству осуществляется точно так же:

alert(o.test)

alert(o['test'])

Если у объекта нет такого свойства, то результат будет 'undefined'

var o = {}

alert(o.nosuchkey)   // => undefined

Никакой ошибки при обращении по несуществующему свойству не будет, просто вернется специальное значение undefined.

Проверка глобальной переменной

В javascript нельзя проверить существование глобальной переменной простым if:

if (x) { ... }

Если x не определен, то конструкция if (x) вызовет ошибку javascript.

Распространенное решение - использовать typeof:

if (typeof x != 'undefined') { ... }  // или typeof(x)

Однако зная, что глобальная переменная в javascript - всего лишь свойство объекта window - мы можем записать проще:

if (window.x) { ... }   // правильный аналог if(x)

// или

if (window.x !== undefined) // аналог typeof x ..

Все свойства объектов - public, т.е при определении свойства никак нельзя ограничить доступ к свойству. В javascript есть специальные выверты для созданияprivate свойств, связанные с замыканиями. Они рассмотрены вместе снаследованием объектов.

Удаление свойств

Удаляет свойство оператор delete:

o.test = 5

delete o.test

o['bla'] = true

Расширенное создание

Свойства можно указывать непосредственно при создании объекта, через список в фигурных скобках вида {..., ключ : значение, ...}:

1

var o = {

2

test: 5,

3

bla: true

4

}

Получившийся объект можно изобразить так:

Методы объектов

Добавление метода

Как и в других языках, у объектов javascript есть методы.

Например, создадим объект rabbit с методом run

1	var rabbit = {}

2	rabbit.run = function(n) {

3	alert("Пробежал "+n+" метров!")

4

}

Добавление метода в объект - просто присвоение функции function(n) { ... }свойству rabbit.run.

Теперь можно запускать

1	var rabbit = {}

2	rabbit.run = function(n) {

3	alert("Пробежал "+n+" метров!")

4

}

5	rabbit.run(5)  // Пробежал 5 метров

6	rabbit.run(7)  // Пробежал 7 метров

Здесь не идет речь о классах, создании экземпляров и тому подобном. Просто - в любой объект в любое время можно добавить новый метод или удалить существующий.

Javascript - очень динамический язык, не правда ли?

Доступ к объекту из метода

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

Для этого используется ключевое слово this:

for(var key in obj) {

… obj[key] …

}

В отличие от многих языков, this никак не привязано к объекту, а обозначает просто объект, вызвавший функцию.

Например,

01	function this1() {

02	var vasya = { name:'Вася' }

03	var petya = { name:'Петя' }

04

05	sayName  = function() {

06	alert("Я - "+ (this.name ? this.name : 'безымянный') )

07

}

08

09	vasya.sayName = sayName

10

11	// один и тот же метод в двух объектах

12	petya.sayName = vasya.sayName

13

14	// тут - this будет petya

15	petya.sayName()  // Я - Петя

16

17	// тут - this будет vasya

18	vasya.sayName()  // Я - Вася

19

20	// а тут - вызывается метод глобального объекта window, у которого нет имени

21	sayName() // Я - безымянный

22

}

Запустить this1()

Более подробно о том, как работает this можно почитать в этой статье.

Перебор свойств объекта

Для перебора всех свойств объекта используется специальный вид конструкции for,for..in:

1	for(var key in object) {

2	// key - название свойства

3	// object[key] - значение свойства

4

...

5

}

Например,

1	var o = {a:5, b:true}

2	for (var key in o) {

3	alert(key+':'+o[key])

4

}

Запустить

Это уже выходит за рамки текущей статьи, но вообще - существует еще одна форма перебора свойств, которая более надежна, особенно если используется библиотека типа prototype.

1	for(prop in object) {

2	if (!object.hasOwnProperty(prop)) continue

3

//...

4

}

Эта форма отфильтровывает свойства, которые принадлежат не самому объекту, а его прототипу. Поэтому она работает, даже если в прототип Object добавлены новые свойства.

Более элегантный вариант записи:

for(prop in object) if (object.hasOwnProperty(prop)) {

//...

}