في الآونة الأخيرة ، كانت ExtJS شعبية للغاية. طالما أنها شركة متعلقة بـ CRM/HRM ، فهي تفكر الآن في كيفية استخدامها في المشاريع ، لكنني لا أجرؤ على ذلك. السبب بسيط للغاية: إنه كبير جدًا/غبي جدًا/من الصعب تصحيح رمز المصدر. لكن الجداول والوظائف الجميلة من extjs تجعلني حقا. أتذكر أن رفيقًا أجنبيًا كتب مكونًا مشابهًا لـ jQuery لـ extJs ، لذلك بحثت عنه في محيط jquery المكون الإضافي. هاها ، لقد وجدت ذلك حقًا. يبدو أن jQuery أفضل. إنه صغير وبسيط ، مثل محرك سيارة جيد. يمكنني ديي ما أريد. إنه مناسب حقًا. لا يتجاوز الحل الكلي 80 كيلو بايت في نقل الشبكة ، والسرعة أصغر من سرعة ExtJs بحجم 500 كيلو بايت. . .
تنزيل العنوان: http://code.google.com/p/flexigrid/
ومع ذلك ، نظرًا لأن معظم المعلومات الموجودة على Flexigrid على الإنترنت مكتوبة في PHP أو Java ، فقد قمت ببساطة بتعديلها وقدمت نسخة من نسخ من تطبيق Table ExtJS ، على أمل أن يكون مفيدًا للجميع.
الاستخدام الأساسي:
1 في الأساس ، الاستخدام بسيط للغاية. تحتاج فقط إلى إضافة مكتبة jQuery و 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">
$ ("وثيقة"). جاهز (وظيفة () {
$ ('#flexme1'). flexigrid () ؛
$ ('#flexme2'). flexigrid () ؛
}) ؛
</script>
2 فقط أضف النموذج الذي يجب تنسيقه
نسخة الكود كما يلي:
<H1>
أسهل طاولة مرانية 1 </h1>
<جدول المعرف = "FlexMe1">
<head>
<tr>
<h>
العقيد 1
</th>
<h>
العقيد 2
</th>
<h>
العقيد 3 هو اسم رأس طويل
</th>
<h>
العقيد 4
</th>
</r>
</head>
<tbody>
<tr>
<td>
هذه هي البيانات 1 مع المحتوى المفرط
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
</tbody>
</table>
<p>
</p>
<H1>
أسهل طاولة مرانية 2 </h1>
<جدول معرف = "FlexMe2">
<head>
<tr>
<h>
العقيد 1
</th>
<h>
العقيد 2
</th>
<h>
العقيد 3 هو اسم رأس طويل
</th>
<h>
العقيد 4
</th>
</r>
</head>
<tbody>
<tr>
<td>
هذه هي البيانات 1 مع المحتوى المفرط
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
<tr>
<td>
هذه بيانات 1
</td>
<td>
هذه هي البيانات 2
</td>
<td>
هذه هي البيانات 3
</td>
<td>
هذه هي البيانات 4
</td>
</r>
</tbody>
</table>
من أجل زيادة تأثير الاستخدام الأساسي لـ Flexigrid ، يمكننا إجراء تعديلات أساسية من خلال المعلمات
رأس مخصص
تطبيق رمز محدد:
نسخة الكود كما يلي:
<script type = "text/javaScript">
$ ("وثيقة"). جاهز (وظيفة () {
$ ('#flexme1'). flexigrid ({
Colmodel: [
{display: 'iso' ، الاسم: 'iso' ، العرض: 40 ، قابل للفرز: صحيح ، محاذاة: "المركز"} ،
{Display: 'Name' ، Name: 'Name' ، Width: 180 ، fortable: true ، align: 'Left'} ،
{Display: "اسم printable" ، الاسم: "printable_name" ، العرض: 120 ، قابل للفرز: صواب ، محاذاة: "اليسار"} ،
{Display: 'ISO3' ، الاسم: 'iso3' ، العرض: 130 ، قابل للفرز: صواب ، محاذاة: "اليسار" ، إخفاء: صحيح} ،
{Display: 'Number Code' ، Name: 'NumCode' ، Width: 80 ، Fortable: true ، align: 'right'}
]
}) ؛
$ ('#flexme2'). flexigrid ({
Colmodel: [
{display: 'iso' ، الاسم: 'iso' ، العرض: 40 ، قابل للفرز: صحيح ، محاذاة: "المركز"} ،
{Display: 'Name' ، Name: 'Name' ، Width: 180 ، fortable: true ، align: 'Left'} ،
{Display: "اسم printable" ، الاسم: "printable_name" ، العرض: 120 ، قابل للفرز: صواب ، محاذاة: "اليسار"} ،
{Display: 'ISO3' ، الاسم: 'iso3' ، العرض: 130 ، قابل للفرز: صواب ، محاذاة: "اليسار" ، إخفاء: صحيح} ،
{Display: 'Number Code' ، Name: 'NumCode' ، Width: 80 ، Fortable: true ، align: 'right'}
]
SortName: "ISO" ،
Sortorder: "ASC" ،
}) ؛
}) ؛
</script>
طي مخصص ، تطبيق فرز مخصص
نسخة الكود كما يلي:
<script type = "text/javaScript">
$ ("وثيقة"). جاهز (وظيفة () {
$ ('#flexme1'). flexigrid ({
Colmodel: [
{display: 'iso' ، الاسم: 'iso' ، العرض: 40 ، قابل للفرز: صحيح ، محاذاة: "المركز"} ،
{Display: 'Name' ، Name: 'Name' ، Width: 180 ، fortable: true ، align: 'Left'} ،
{Display: "اسم printable" ، الاسم: "printable_name" ، العرض: 120 ، قابل للفرز: صواب ، محاذاة: "اليسار"} ،
{Display: 'ISO3' ، الاسم: 'iso3' ، العرض: 130 ، قابل للفرز: صواب ، محاذاة: "اليسار" ، إخفاء: صحيح} ،
{Display: 'Number Code' ، Name: 'NumCode' ، Width: 80 ، Fortable: true ، align: 'right'}
] ، العرض: 700 ، الارتفاع: 300 ، usepager: true ، showtabletogglebtn: true ، العنوان: "انقر لي للانهيار"
}) ؛
$ ('#flexme2'). flexigrid ({
Colmodel: [
{display: 'iso' ، الاسم: 'iso' ، العرض: 40 ، قابل للفرز: صحيح ، محاذاة: "المركز"} ،
{Display: 'Name' ، Name: 'Name' ، Width: 180 ، fortable: true ، align: 'Left'} ،
{Display: "اسم printable" ، الاسم: "printable_name" ، العرض: 120 ، قابل للفرز: صواب ، محاذاة: "اليسار"} ،
{Display: 'ISO3' ، الاسم: 'iso3' ، العرض: 130 ، قابل للفرز: صواب ، محاذاة: "اليسار" ، إخفاء: صحيح} ،
{Display: 'Number Code' ، Name: 'NumCode' ، Width: 80 ، Fortable: true ، align: 'right'}
]
SearchItems: [
{Display: 'iso' ، الاسم: '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) ،
صفحة int ،
recsperpage int ،
ID Varchar (255) ،
sort varchar (255)
)
مثل
DECRARETRSTR NVARCHAR (4000)
set @str = 'select top'+
يلقي (recsperpage كما varchar (20))+
' * من ('+@sql+') t حيث t.'+
@id+
"ليس في (SELECT TOP"+
يلقي ((@recsperPage*(@page-1)) كـ varchar (20))+
'+
@id+
' من ('
+@SQL+
') ترتيب T9 بواسطة'+
@sort+
') order by'+
@نوع
print 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 (NamePace = "http://tempuri.org/")]
[WebServiceBinding (contirmsto = wsiprofiles.basicprofile1_1)]
الطبقة العامة getDataSource4: ihttphandler
{
Public Void ProcessRequest (سياق httpcontext)
{
context.Response.contentType = "text/plain" ؛
// احصل على الصفحة الحالية
String currentpage = context.request ["page"] ؛
// احصل على مقدار ما يتم عرضه لكل صفحة
سلسلة pageshowlimit = context.request ["rp"] ؛
// احصل على المفتاح الأساسي
String tableId = context.request ["sortName"] ؛
// احصل على طريقة الفرز
string ordermethod = context.request ["sortorder"] ؛
// احصل على الحقول المراد ترشيحها
سلسلة filterfield = context.request ["qtype"] ؛
// احصل على المحتوى المراد ترشيحه
سلسلة FilterFieldContext ؛
if (context.request.form ["letter_pressed"] == null)
{
FilterFieldContext = "" ؛
}
آخر
{
FilterFieldContext = context.request ["letter_pressed"] ؛
}
// احصل على إجمالي عدد صفوف الجدول
سلسلة 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 OddringId ، addressline1 ، addressline2 ، postalcode ، city from person.address" ؛
}
آخر
{
String [] tmp = filterfield.split ('،') ؛
sql.value = "Select OddringId ، addressline1 ، addressline2 ، postalcode ، city from person.Address حيث" + tmp [0] + "مثل" + 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.execateeataset (configurationManager.appsettings ["SQL2"] ،
commandtype.storedprocedure ، "spall_returnrows" ،
sqlparameter جديد []
{
SQL ، صفحة ، ressperpage ، معرف ، فرز
}). الجداول [0] ؛
context.Response.write (dttoson2 (returntable ، currentpage ، tableRowCount)) ؛
}
/// <summary>
/// json تحويل تنسيق
/// </summary>
/// <param name = "dt"> table datatable </param>
/// <param name = "page"> الصفحة الحالية </param>
/// <param name = "total"> كم عدد الصفوف في المجموع </param>
/// <Returns> </roverse>
السلسلة الثابتة العامة dttoson2 (Datatable DT ، صفحة السلسلة ، إجمالي السلسلة)
{
StringBuilder jsonstring = new StringBuilder () ؛
jsonstring.appendline ("{") ؛
jsonstring.appendformat ("الصفحة: {0} ،/n" ، صفحة) ؛
jsonstring.appendformat ("Total: {0} ،/n" ، total) ؛
jsonstring.appendline ("الصفوف: [") ؛
لـ (int i = 0 ؛ i <dt.rows.count ؛ i ++)
{
jsonstring.append ("{") ؛
jsonstring.appendformat ("id: '{0}' ، الخلية: [" ، 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 =/"button/" value =/"view/" id =/
}
}
jsonstring.append ("]") ؛
إذا (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" errantits = "griddemo.complex_8" ٪>
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<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 = "stylesheet" href = "facebox/facebox.css"/>
<link type = "text /css" rel = "stylesheet" href = "body.css" />
<script type = "text/javaScript" src = "facebox/facebox.js"> </script>
<script type = "text/javaScript">
$ ("وثيقة"). جاهز (وظيفة () {
$ ("#flex1"). flexigrid
({
عنوان URL: 'getDatasource4.ashx' ،
نوع البيانات: "JSON" ،
Colmodel: [
{display: 'addressId' ، الاسم: 'addressId' ، العرض: 40 ، قابل للفرز: صواب ، محاذاة: "المركز"} ،
{Display: "عنوان محدد 1" ، الاسم: "Odderfline1" ، العرض: 140 ، قابل للفرز: صواب ، محاذاة: "اليسار"} ،
{Display: "عنوان محدد 2" ، الاسم: "Odderfline2" ، العرض: 80 ، فرز: صواب ، محاذاة: "اليسار"} ،
{Display: 'zip code' ، الاسم: 'postalcode' ، العرض: 80 ، قابل للفرز: صواب ، محاذاة: 'اليسار'} ،
{Display: 'City' ، Name: 'City' ، Width: 80 ، fortable: true ، align: 'Left'} ،
{Display: 'Opt' ، Name: 'Opt' ، Width: 80 ، fortable: true ، align: 'left'}
]
الأزرار: [
{name: 'a' ، onpress: sorlypha} ،
{name: 'b' ، onpress: sorlypha} ،
{name: 'c' ، onpress: sorlypha} ،
{name: 'd' ، onpress: sorlypha} ،
{name: 'e' ، onpress: sorlypha} ،
{name: 'f' ، onpress: sorlypha} ،
{name: 'g' ، onpress: sorlypha} ،
{name: 'H' ، onpress: sorlypha} ،
{name: 'i' ، onpress: sorlypha} ،
{name: 'J' ، OnPress: sorlypha} ،
{name: 'k' ، onpress: sorlypha} ،
{name: 'l' ، onpress: sorlypha} ،
{name: 'm' ، onpress: sorlypha} ،
{name: 'n' ، onpress: sorlypha} ،
{name: 'o' ، onpress: sorlypha} ،
{name: 'p' ، onpress: sorlypha} ،
{name: 'q' ، onpress: sorlypha} ،
{name: 'r' ، onpress: sorlypha} ،
{name: 's' ، onpress: sorlypha} ،
{name: 't' ، onpress: sorlypha} ،
{name: 'u' ، onpress: sorlypha} ،
{name: 'V' ، OnPress: sorlypha} ،
{name: 'w' ، onpress: sorlypha} ،
{name: 'x' ، onpress: sorlypha} ،
{name: 'y' ، onpress: sorlypha} ،
{name: 'Z' ، OnPress: sorlypha} ،
{name: '٪' ، onpress: sorlypha}
]
SearchItems: [
{Display: 'City' ، Name: 'City' ، isDefault: True} ،
{Display: 'zip code' ، الاسم: 'postalcode'}
]
usepager: صحيح ،
العنوان: "معلومات العميل" ،
userp: صحيح ،
RP: 10 ،
showtabletogglebtn: صحيح ،
العرض: 700 ،
الارتفاع: 200 ،
Rpoptions: [10 ، 15 ، 20 ، 25 ، 40 ، 60] ، // يمكن تحديد عدد النتائج لكل صفحة
procmsg: "يرجى انتظار تحميل البيانات ..." ، // رسالة موجهة تتم معالجتها
قابلة للتشكيل: خطأ ، // هل هو قابل للتطوير؟
sortname: "addressid" ،
// sortorder: "ASC" ، // لا يمكن استخدام هذا العمود بسبب الإجراءات المخزنة
}) ؛
}) ؛
وظيفة sortalpha (com) {
jQuery ('#flex1'). flexoptions ({newp: 1 ، params: [{name: 'letter_pression' ، 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>
<body>
<griding>
</table>
</body>
</html>