В последнее время ExtJS действительно был очень популярен. Пока это компания, связанная с CRM/HRM, теперь она думает о том, как использовать ее в проектах, но я не смею. Причина очень проста: это слишком большой/слишком глупый/исходный код трудно отладить. Но красивые столы и функции ExtJ действительно делают меня слюной. Я помню, что иностранный товарищ написал аналогичный плагин jQuery для ExtJ, поэтому я искал его в океане подключаемого модуля jQuery. Ха -ха, я действительно нашел это. Кажется, что мой jQuery лучше. Он маленький и простой, как хороший автомобильный двигатель. Я могу сделать что -нибудь, что захочу. Это действительно удобно. Общее решение не превышает 80 КБ в передаче сети, а скорость меньше, чем у EXTJ, размером 500 КБ. Полем Полем
Адрес загрузки: http://code.google.com/p/flexigrid/
Однако, поскольку большая часть информации о Flexigrid в Интернете написана в PHP или Java, я просто изменил ее и сделал версию подражания в реализации таблицы ExtJS, надеясь, что это будет полезно для всех.
Основное использование:
1 По сути, использование очень простое. Вам нужно только добавить JQUERY Library и JS FlexIGRID, чтобы форматировать и украсить таблицу.
Кода -копия выглядит следующим образом:
<link rel = "styleSheet" type = "text/css" href = "css/flexigrid/flexigrid.css">
<script type = "text/javascript" src = "lib/jquery/jquery-1.2.6.min.js"> </script>
<script type = "text/javascript" src = "flexigrid.pack.js"> </script>
<%-<script type = "text/javascript" src = "lib/jquery/jquery-1.2.6-vsdoc-cn.js"> </script>-%>
<script type = "text/javascript">
$ ("документ"). ready (function () {
$ ('#flexme1'). Flexigrid ();
$ ('#flexme2'). Flexigrid ();
});
</script>
2 Просто добавьте форму, которую необходимо отформатировать
Кода -копия выглядит следующим образом:
<h1>
Самая простой гибкая таблица 1 </h1>
<таблица идентификатора = "flexme1">
<голова>
<tr>
<th>
Кол
</th>
<th>
Кол
</th>
<th>
Col 3 - длинное название заголовка
</th>
<th>
Кол
</th>
</tr>
</head>
<tbody>
<tr>
<Td>
Это данные 1 с переполненным содержанием
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
</tbody>
</table>
<p>
</p>
<h1>
Самая простой гибкая таблица 2 </h1>
<Таблица ID = "Flexme2">
<голова>
<tr>
<th>
Кол
</th>
<th>
Кол
</th>
<th>
Col 3 - длинное название заголовка
</th>
<th>
Кол
</th>
</tr>
</head>
<tbody>
<tr>
<Td>
Это данные 1 с переполненным содержанием
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
<tr>
<Td>
Это данные 1
</td>
<Td>
Это данные 2
</td>
<Td>
Это данные 3
</td>
<Td>
Это данные 4
</td>
</tr>
</tbody>
</table>
Чтобы увеличить базовый эффект использования Flexigrid, мы можем внести основные корректировки по нему через параметры
Пользовательский заголовок
Реализация конкретного кода:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
$ ("документ"). ready (function () {
$ ('#flexme1'). Flexigrid ({
Колмодель: [
{Display: 'iso', имя: 'iso', width: 40, сортируется: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{Display: 'printable name', name: 'printable_name', width: 120, sortable: true, align: 'left'},
{Display: 'iso3', имя: 'iso3', ширина: 130, сортируется: true, выравнивать: 'left', hide: true},
{display: 'номер кода', имя: 'numcode', width: 80, сортируется: true, align: 'right'}
]
});
$ ('#flexme2'). Flexigrid ({
Колмодель: [
{Display: 'iso', имя: 'iso', width: 40, сортируется: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{Display: 'printable name', name: 'printable_name', width: 120, sortable: true, align: 'left'},
{Display: 'iso3', имя: 'iso3', ширина: 130, сортируется: true, выравнивать: 'left', hide: true},
{display: 'номер кода', имя: 'numcode', width: 80, сортируется: true, align: 'right'}
],
sortName: "iso",
Sortorder: "ASC",
});
});
</script>
Пользовательская складка, пользовательская реализация сортировки
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
$ ("документ"). ready (function () {
$ ('#flexme1'). Flexigrid ({
Колмодель: [
{Display: 'iso', имя: 'iso', width: 40, сортируется: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{Display: 'printable name', name: 'printable_name', width: 120, sortable: true, align: 'left'},
{Display: 'iso3', имя: 'iso3', ширина: 130, сортируется: true, выравнивать: 'left', hide: true},
{display: 'номер кода', имя: 'numcode', width: 80, сортируется: true, align: 'right'}
], ширина: 700, высота: 300, Usepager: True, ShowTableToggleBtn: True, заголовок: «Нажмите меня, чтобы обрушиться»
});
$ ('#flexme2'). Flexigrid ({
Колмодель: [
{Display: 'iso', имя: 'iso', width: 40, сортируется: true, align: 'center'},
{display: 'name', name: 'name', width: 180, sortable: true, align: 'left'},
{Display: 'printable name', name: 'printable_name', width: 120, sortable: true, align: 'left'},
{Display: 'iso3', имя: 'iso3', ширина: 130, сортируется: true, выравнивать: 'left', hide: true},
{display: 'номер кода', имя: 'numcode', width: 80, сортируется: true, align: 'right'}
],
SearchItems: [
{display: 'iso', name: 'iso'},
{display: 'name', name: 'name', isdefault: true}
],
sortName: "iso",
Sortorder: "ASC",
Название: «Результаты моих тестов»,
Ширина: 700,
высота: 300,
UsePager: True, ShowTableToggleBtn: True, RP: 10
});
});
</script>
Расширенное использование:
1. Хранитованная процедура, используемая для страниц.
Кода -копия выглядит следующим образом:
Создать процедуру [dbo]. [Spall_returnrows]
(
@Sql nvarchar (4000),
@Page int,
@Recsperpage int,
@Id varchar (255),
@Sort varchar (255)
)
КАК
Объявить @str nvarchar (4000)
Установить @str = 'select top'+
CAST (@recsperpage As varchar (20))+
' * From ('+@sql+') t, где t.'+
@Id+
'Не в (выберите топ'+
CAST ((@recsperpage*(@page-1)) как varchar (20))+
'+
@Id+
' ОТ ('
+@Sql+
') T9 Порядок на'+
@Sort+
') Порядок на'+
@Sort
Печать @str
Exec sp_executesql @str
2 Асинхронная реализация передачи данных JSON
Кода -копия выглядит следующим образом:
Использование системы;
Использование System.collections.generic;
Использование System.configuration;
Использование System.data;
Использование System.data.sqlClient;
Использование System.linq;
Использование System.Text;
Использование System.Web;
Использование System.Web.Services;
Использование Newtonsoft.json;
Пространство имен Griddemo
{
/// <summary>
/// Сводка описания $ codebehindclassname $
/// </summary>
[Webservice (namespace = "http://tempuri.org/")]]]
[WebserviceBinding (conformsto = wsiprofiles.basicprofile1_1)]]
открытый класс getDataSource4: ihttphandler
{
public void ProcessRequest (контекст HTTPContext)
{
context.response.contenttype = "text/plain";
// Получить текущую страницу
String CurrentPage = context.Request ["page"];
// Получить, сколько отображается на страницу
string pageshowlimit = context.request ["rp"];
// Получить первичный ключ
string tableId = context.request ["sortName"];
// Получить метод сортировки
String ordermethod = context.request ["sortorder"];
// Получите поля фильтровать
String filterfield = context.request ["qtype"];
// Получить контент для фильтрации
String FilterFieldContext;
if (context.request.form ["letk_pressed"] == null)
{
FilterFieldContext = "";
}
еще
{
FilterFieldContext = context.Request ["letmed_pressed"];
}
// Получить общее количество рядов таблицы
string tableRowCount = sqlHelper.executesCalar (configurationManager.appsettings ["sql2"],
CommandType.Text,
"Выберите счет (*) от person.address"
) .ToString ();
// Получить основной SQL
SqlParameter sql = new SQLParameter ("@SQL", sqldbtype.nvarchar);
//Sql.value = "select * from person.address";
if (filterfieldcontext.length == 0 || filterfield.length == 0)
{
Sql.value = "select addressId, addressline1, addressline2, postalCode, город от Person.address";
}
еще
{
string [] tmp = filterfield.split (',');
Sql.value = "select addressid, addressline1, addressline2, postalcode, city from person.address, где" + tmp [0] + "like '" + filterfieldcontext + "%'";
}
SQLParameter Page = new SQLParameter ("@Page", sqldbtype.int);
Page.value = convert.toint32 (CurrentPage);
SqlParameter recsperpage = new SQLParameter ("@Recsperpage", sqldbtype.int);
Recsperpage.value = convert.toint32 (pageshowlimit);
SqlParameter id = new sqlParameter ("@id", sqldbtype.varchar);
Id.value = tableId;
SqlParameter sort = new sqlParameter ("@sort", sqldbtype.varchar);
Sort.value = tableId;
// Получить таблицу
DataTable returnTable = sqlHelper.executedAtaset (configurationManager.appsettings ["sql2"],
CommandType.StoredProcedure, "spall_returnrows",
Новый SQLParameter []
{
SQL, Page, RecsperPage, ID, Sort
}). Таблицы [0];
context.response.write (dttoson2 (returntable, currentPage, tableRowCount));
}
/// <summary>
/// json преобразование формата формата
/// </summary>
/// <param name = "dt"> таблица данных </param>
/// <param name = "page"> текущая страница </param>
/// <param name = "total"> сколько строк в общем </param>
/// <returns> </returns>
Public Static String Dttoson2 (DataTable DT, String Page, String Total)
{
StringBuilder jsonstring = new StringBuilder ();
jsonstring.appendline ("{");
jsonstring.appendformat ("page: {0},/n", page);
jsonstring.appendformat ("total: {0},/n", total);
jsonstring.appendline ("Rows: [");
для (int i = 0; i <dt.rows.count; i ++)
{
jsonstring.append ("{");
jsonstring.appendformat ("id: '{0}', cell: [", dt.rows [i] [0] .toString ());
для (int j = 0; j <dt.columns.count; j ++)
{
if (j == dt.columns.count - 1)
{
jsonstring.appendformat ("'{0}'", dt.rows [i] [j] .toString ());
}
еще
{
jsonstring.appendformat ("'{0}',", dt.rows [i] [j] .toString ());
}
if (j == dt.columns.count - 1)
{
jsonstring.appendformat (", '{0}'", "<input type =/" value =/"view/" id =/"ss/" onclick =/"ss (" + dt.rows [i] [0] .toString () + ")/"/> ");
}
}
jsonstring.append ("]");
if (i == dt.rows.count - 1)
{
jsonstring.appendline ("}");
}
еще
{
jsonstring.appendline ("},");
}
}
jsonstring.append ("]");
jsonstring.appendline ("}");
вернуть jsonstring.toString ();
}
Общественный подъемник
{
получать
{
вернуть ложь;
}
}
}
}
3 страница реализация
Кода -копия выглядит следующим образом:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "complex-8.aspx.cs" enherits = "griddemo.complex_8" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<title> </title>
<link rel = "styleSheet" type = "text/css" href = "/css/flexigrid/flexigrid.css"/>
<script type = "text/javascript" src = "/lib/jquery/jquery.js"> </script>
<script type = "text/javascript" src = "flexigrid.js"> </script>
<Link Type = "text/css" rel = "stylesshiet" href = "facebox/facebox.css"/>
<Link Type = "text /css" rel = "stylesshiet" href = "body.css" />
<script type = "text/javascript" src = "facebox/facebox.js"> </script>
<script type = "text/javascript">
$ ("документ"). ready (function () {
$ ("#flex1"). Flexigrid
({
URL: 'getDataSource4.ashx',
DataType: 'json',
Колмодель: [
{display: 'addressId', name: 'addressId', width: 40, sortable: true, align: 'center'},
{Display: «Конкретный адрес 1», имя: 'addressline1', ширина: 140, сортируемый: true, align: 'left'},
{Display: 'Конкретный адрес 2', имя: 'Addressline2', ширина: 80, сортируемый: true, align: 'left'},
{Display: 'Zip Code', name: 'postalCode', ширина: 80, сортируется: true, выравнивать: 'left'},
{Display: 'City', название: 'City', ширина: 80, сортируется: true, align: 'left'},
{Display: 'Opt', имя: 'Opt', ширина: 80, сортируемый: true, align: 'left'}
],
кнопки: [
{name: 'a', Onpress: sortalpha},
{name: 'b', Onpress: orsealpha},
{name: 'c', Onpress: sortalpha},
{name: 'd', Onpress: orsalpha},
{name: 'e', Onpress: sortalpha},
{name: 'f', Onpress: sortalpha},
{name: 'g', Onpress: orkalpha},
{name: 'h', Onpress: orkalpha},
{name: 'i', Onpress: sortalpha},
{name: 'J', Onpress: sortalpha},
{name: 'k', Onpress: sortalpha},
{name: 'l', Onpress: sortalpha},
{name: 'm', Onpress: orsalpha},
{name: 'n', Onpress: sortalpha},
{name: 'o', Onpress: sortalpha},
{name: 'p', Onpress: sortalpha},
{name: 'Q', Onpress: orsalpha},
{name: 'r', Onpress: sortalpha},
{name: 's', Onpress: orsealpha},
{name: 't', Onpress: orsalpha},
{name: 'u', Onpress: sortalpha},
{name: 'v', Onpress: orkalpha},
{name: 'w', Onpress: sortalpha},
{name: 'x', Onpress: sortalpha},
{name: 'y', Onpress: sortalpha},
{name: 'z', Onpress: orsalpha},
{name: '%', Onpress: sortalpha}
],
SearchItems: [
{Display: 'City', имя: 'City', Isdefault: true},
{display: 'Zip Code', имя: 'postalCode'}
],
USEPAGER: Правда,
Название: «Информация о клиенте»,
userp: true,
RP: 10,
ShowTableToggleBtn: True,
Ширина: 700,
Высота: 200,
Rpopptions: [10, 15, 20, 25, 40, 60], // количество результатов может быть выбрано на страницу
Procmsg: «Пожалуйста, подождите, пока данные будут загрузки ...», // Запрашиваемое сообщение обрабатывается
Репрезентабельно: false, // это масштабируемо?
SortName: "AddersId",
// sortorder: "asc", // Этот столбец не может быть использован из -за хранимых процедур
});
});
Функция sortalpha (com) {
jQuery ('#Flex1'). FlexOptions ({newp: 1, params: [{name: 'ittle_pressed', value: com}, {name: 'qtype', value: $ ('select [name = qtype]'). val ()}]});
jQuery ("#Flex1"). FlexReload ();
}
Функция SSS (данные)
{
var temp = eval (data);
// jquery.facebox (temp);
jquery.facebox ({ajax: 'default.aspx? id ='+temp})
}
</script>
</head>
<тело>
<Таблица>
</table>
</body>
</html>