Демка для канадцев

CTAPbIu_MABP — Thu, 28 Oct 2010 09:01:49 +0000

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

Вот давече нашел каких-то noname канадцев, склепал им демку, но договориться не удалось.

Собственно особенности демки: jqGrid, jsTree, Layouts. Без особой фантазии скреплено друг с другом - обычное бизнес приложение. Такие кстати на ExtJS, наверное, лучше делать. Самым примечательным является D&D между таблицей и деревом и изменение размеров аккордеона и таблицы при изменении размеров панели. Тыкайтесь :)

А ну и к случаю обновил пару статей: jqGrid, Paint, UI.Layout. И соответствующие библиотеки до последних версий.

Col/Colgroup

CTAPbIu_MABP — Tue, 02 Mar 2010 10:04:57 +0000

Это еще один псот ненависти к IE, и родился он из первой же задачи на новом проекте. Смысл задачи в том что надо сделать скроллер у таблицы, тоесть есть табличка в которой 10 столбиков но показывать надо только 3 и есть кнопочка вперед/назад которая меняет видимые столбики. Ну на мой любимый затык с математикой и крайними случаями у меня ушло всего два часа :( FAIL! А вот на то чтобы заставить исчезать столбики целых два дня.

Как обычно я решил использовать самый современные технологии, например тэг COL для управления колонками, казалось бы что тут такого страшного, все его поддерживают, да не все могут скрыть, ну да ладно в IE8 работает и этого достаточно. Набросал скриптик на jquery вроде такого


$("#myTbl")
    .find("col")
    .css({visibility:"collapse"})
    .slice(firstVisible, firstVisible + columns)
    .css({visibility:""})

я решил что все уже позади, но не тут то было. Во-первых jquery не может различить видимые и невидимые колонки, о чем я оставил камент на странице описания селектора :visible , но похоже разработчики посчитали что это баг репорт и удалили его. Во-вторых чертов IE8 хоть и умеет прятать колонки не может их правильно отрисовать после этого, получаеться что текст всех скрытых колонок отображаеться под текстом первой видимой в несколько слоев, это легко убрать всего лишь нажав ctrl+A, но сами понимаете - это не выход.

Результатом всех этих мучений стало то, что пришлось итерироваться по всем ячейкам таблицы и скрывать неугодные.

jqGrid

CTAPbIu_MABP — Sun, 31 Jan 2010 17:53:05 +0000

Хочу продолжить благое дело начатое TRAHOMOTO. И хотя с одной стороны хоть я с ним и не согласен в некоторых моментах, а с другой стороны не буду рассказывать про бэкэнд, моя статья должна стать хорошим дополнением к его статье.

Начну я с того, что закидаю вас ссылками на блог для скачивания и wiki для установки плагина, а потом покажу как это все сконфигурировать.

Итак для построения таблицы нужны данные, я придумал вот такую JSON рыбу, она статичная так что вам ничего добавить не получиться :P


{"total":1,"records":7,"page":1,
	"rows":[
		{"id":1,"cell":[1,"Москва",55.755786,37.617633,"Yes",["A","B","C"]]},
		{"id":2,"cell":[2,"Киев",50.440951,30.527181,"Yes",["A","B"]]},
		{"id":3,"cell":[3,"Минск",53.905117,27.561184,"Yes",["A","C"]]},
		{"id":4,"cell":[4,"Сан Франциско",37.77493,-122.419416,"No",["B","C"]]},
		{"id":5,"cell":[5,"Нью Йорк",40.714269,-74.005973,"No",["A"]]},
		{"id":6,"cell":[6,"Лондон",51.51333,-0.088947,"Yes",["B"]]},
		{"id":7,"cell":[7,"Наироби",0.878872,37.924805,"Yes",["C"]]}
	]
}

Тут каждая строка описывает имя города, широту, долготу, флажок является ли город столицей и какие-то буквы имитирующие список.

Есть еще словарик


[
{value:"a",name:"A"},
{value:"b",name:"B"},
{value:"c",name:"C"},
{value:"d",name:"D"},
{value:"e",name:"E"}
]

и ответ о успешном добавлении


{"message":"","id":8}

Ну и перед самым интересным еще HTML разметка, она совсем простая и требует задания всего одной таблицы и одного дива.






Example from CTAPbIu_MABP's BLOG




 

<-- 
я подключил jquery-ui потому что он и так есть у меня на сайте
его можно не подключать а использовать плагины jqModal и jqDnR
которые можно скачать вместе с jqGrid, подключать и то и то НЕЛЬЗЯ
 -->

Теперь сам код для создания таблицы, надеюсь слишком просто не будет, все пояснения в коде:


jQuery(document).ready(function($){

	/**
	 * функция для построения select'a из моих данных
	 * тут даже тип ответа нельзя задать
	 * надо все парсить и клеить самому
	 * @param response ответ ajax'a
	 */
	function build(response) {
		// а вот и статья про шаблонизатор пригодилась
		// http://mabp.kiev.ua/2010/01/16/javascript-template-engine/
		var html = '', template = '';
		$(eval("("+response.responseText+")")).each(function(i, val){
			html += template.replace(/(\[([^\[\]]+)\])/g, function($0, $1, $2){
			   return val[$2] || "";
			});
		});
		return '';
	}

	/**
	 * Эта функция формирует пост запрос и для массивов сформирует
	 * переменную вида letters=a,b,c,d,e
	 * я переделываю это все в letters[]=a,letters[]=b итд
	 * заодно экранирую всякую ересь вроде &<>
	 * @param data массив всех данных формы
	 */
	function serialize(data){
		var str = [];
		if(data.letters)
			data.letters = data.letters.split(",");
		for (var i in data) {
			if ($.isArray(data[i])) {
				for (var j in data[i]) {
					str.push(i + "[]=" + encodeURI(data[i][j]));
				}
			} else {
				str.push(i + "=" + encodeURI(data[i]));
			}
		}
		return str.join("&");
	}


	$("#table").jqGrid({
		autowidth:true,
		colNames:["ID","Name","Latitude","Longitude","Capital","Letters"],
		colModel:[
			// запрещаю редактировать id и искать по нему, по остальным - можно
			{name:"id",			index:"id",				width:40,	editable:false, search:false},
			// тип поля ввода textarea/text/checkbox/select а так же все остальные типы поля input
			{name:"name",		index:"name",			width:100,	editable: true,	edittype:"textarea"},
			// можно так же указать maxlength для инпутов и multiple для селектов
			{name:"latitude",	index:"title",			width:100,	editable: true,	edittype:"text",editoptions:{maxlength:16}},
			{name:"longitude",	index:"description",	width:100,	editable: true,	edittype:"text",editoptions:{maxlength:16}},
			// значения для чекбоксов задаються вот так
			{name:"capital",	index:"capital",		width:100,	editable: true,	edittype:"checkbox",editoptions:{value:"Yes:No"}},
			{name:"letters",	index:"letters",		width:100,	editable: true,
				// для селектов тоже можно задать формат инлайн, но я выбрал кастомный формат
				edittype:"select", editoptions:{multiple:true,dataUrl:"/content/polygon/jqgrid.backend-dict.json",buildSelect:build},
				// и для поиска можно сделать селект
				stype:"select", searchoptions:{dataUrl:"/content/polygon/jqgrid.backend-dict.json", buildSelect:build}
				}
		],
		pager:"#pager",
		datatype:"json",
		viewrecords:true,
		url:"/content/polygon/jqgrid.backend-data.json",
		ajaxGridOptions:{ // <-- передаеться прямо в $.ajax
			type : "GET",
			dataType : "json" // <-- странно но эта опция не перекрывает параметр datatype
		},
		/**
		 * Если пользователь запросил страницу номер которой больше чем максимальное 
		 * количество страниц, или меньше чем 1, эта функция вернет его обратно 
		 * в позволенные рамки
		 */
		onPaging: function(pgButton) {
			var curPage = grid.jqGrid('getGridParam','page');
			var lastPage = grid.jqGrid('getGridParam','lastpage');
				if (curPage < 1) {
			this.p.page = 1;
			}
			if (curPage > lastPage) {
				this.p.page = lastPage;
			}
		}
	}).jqGrid("navGrid","#pager",
		{}, // показать/скрыть кнопки добавить/редактировать/удалить/поиск/обновить
		{  // опции для редактирования
			modal:true, // диалог модальный
			url:"/content/polygon/jqgrid.backend-save.json", // бэкэнд
			closeAfterEdit:true, // закрыть диплог после редактирования
			reloadAfterSubmit:false, // перезагрузить таблицу после добавления
			mtype:"GET", // тип запроса, перекрывает все предыдущие настройки
			/**
			 * с помощью этой функции можно показать ошибки заполнения формы
			 * а так же вставить новый ряд с id который пришел с сервера
			 * error - {"message":"Epic Fail!"}
			 * succes - {"message":""}
			 * @param response
			 */
			afterSubmit:function(response){
				var json = eval("("+response.responseText+")");
				return [!!!json.message,json.message];
			},
			/**
			 * тут я делаю магию: я не хочу что бы можно было редактировать поле letters
			 * поэтому я его дизейблю, но поскольку форма еще не есть частью документа
			 * нельзя сделать выборку $("select")
			 * @param form форма
			 */
			afterShowForm:function(form){
				$("select",form).attr({disabled:"disabled"})
			},
			serializeEditData : serialize // описание функции в начале
		},
		{  // опции для добавления, все так же как и прошлый раз
			modal:true,
			url:"/content/polygon/jqgrid.backend-save.json",
			closeAfterAdd:true, // закрыть диплог после добавления
			reloadAfterSubmit:false,
			mtype:"GET",
			afterSubmit:function(response){
				var json = eval("("+response.responseText+")");
				return [!!!json.message,json.message,json.id];
			},
			/**
			 * Отменяем магию которую сотворила эта же функция при редактировании
			 * @param form форма
			 */
			afterShowForm:function(form){
				$("select",form).removeAttr("disabled");
			},
			serializeEditData : serialize
		},
		{ // опции для удаления
			modal:true,
			url:"/content/polygon/jqgrid.backend-save.json",
			reloadAfterSubmit:false,
			mtype:"GET",
			afterSubmit:function(response){
				var json = eval("("+response.responseText+")");
				return [!!!json.message,json.message];
			},
			serializeDelData : serialize
		},
		{ // опции поиска
			sopt:['eq', 'ne', 'in', 'cn'], // ограничиваю критерии
			multipleSearch:true, // можно искать по нескольким полям
			closeAfterSearch:true // закрыть после поиска
		}
	);
});

Играемся!

Кроме того что не правильно позиционируется диаложек с предупреждением при редактировании на выбранной строки я ошибок не видел. Если что обращайтесь с вопросам, помогу если смогу.

CTAPbIu_MABP's BLOG » grid

Демка для канадцев

Col/Colgroup

jqGrid