최근에 Extjs는 정말 인기가있었습니다. CRM/HRM 관련 회사 인 한 프로젝트에서 사용하는 방법에 대해 생각하고 있지만 감히하지는 않습니다. 그 이유는 매우 간단합니다. 너무 크거나 너무 멍청합니다. 소스 코드는 디버그하기가 어렵습니다. 그러나 Extjs의 아름다운 테이블과 기능은 실제로 나를 침샘하게 만듭니다. 외국 동료가 ExtJS와 비슷한 jQuery 플러그인을 썼으므로 jQuery 플러그인의 바다에서 검색했습니다. 하하, 정말 찾았어요. 내 jquery가 더 나은 것 같습니다. 좋은 자동차 엔진처럼 작고 간단합니다. 내가 원하는대로 DIY를 할 수 있습니다. 정말 편리합니다. 전체 솔루션은 네트워크 전송에서 80KB를 초과하지 않으며 속도는 크기가 500KB 인 ExtJ의 속도보다 적습니다. . .
다운로드 주소 : http://code.google.com/p/flexigrid/
그러나 인터넷의 Flexigrid에 대한 대부분의 정보는 PHP 또는 Java로 작성되었으므로 간단히 수정하고 ExtJS 테이블 구현의 카피 캣 버전을 만들었습니다.
기본 사용 :
1 기본적으로 사용은 매우 간단합니다. jQuery 라이브러리와 Flexigrid의 JS를 추가하여 테이블을 형식화하고 아름답게하기 만하면됩니다.
코드 사본은 다음과 같습니다.
<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">
$ ( "document"). ready (function () {
$ ( '#flexme1'). flexigrid ();
$ ( '#flexme2'). flexigrid ();
});
</스크립트>
2 포맷 해야하는 양식을 추가하십시오.
코드 사본은 다음과 같습니다.
<H1>
가장 쉬운 Flexigrid 테이블 -1 </h1>
<table id = "flexme1">
<헤드>
<tr>
<th>
col 1
</th>
<th>
Col 2
</th>
<th>
Col 3은 긴 헤더 이름입니다
</th>
<th>
Col 4
</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>
</테이블>
<p>
</p>
<H1>
가장 쉬운 Flexigrid 표 -2 </h1>
<table id = "flexme2">
<헤드>
<tr>
<th>
col 1
</th>
<th>
Col 2
</th>
<th>
Col 3은 긴 헤더 이름입니다
</th>
<th>
Col 4
</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>
</테이블>
Flexigrid의 기본 사용 효과를 높이기 위해 매개 변수를 통해 기본 조정을 할 수 있습니다.
맞춤형 헤더
특정 코드 구현 :
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ ( "document"). ready (function () {
$ ( '#flexme1'). Flexigrid ({{
Colmodel : [
{display : 'iso', 이름 : 'Iso', 너비 : 40, 정렬 가능 : true, align : 'center'},
{display : 'name', 이름 : '이름', 너비 : 180, 정렬 가능 : true, align : 'left'},
{display : 'printable name', 이름 : 'printable_name', 너비 : 120, 정렬 가능 : true, 'left'},
{display : 'iso3', 이름 : 'ISO3', 너비 : 130, 정렬 가능 : true, align : 'left', hide : true},
{display : 'number code', name : 'numcode', 너비 : 80, 정렬 가능 : true, align : 'right'}}
]]
});
$ ( '#flexme2'). Flexigrid ({{
Colmodel : [
{display : 'iso', 이름 : 'Iso', 너비 : 40, 정렬 가능 : true, align : 'center'},
{display : 'name', 이름 : '이름', 너비 : 180, 정렬 가능 : true, align : 'left'},
{display : 'printable name', 이름 : 'printable_name', 너비 : 120, 정렬 가능 : true, 'left'},
{display : 'iso3', 이름 : 'ISO3', 너비 : 130, 정렬 가능 : true, align : 'left', hide : true},
{display : 'number code', name : 'numcode', 너비 : 80, 정렬 가능 : true, align : 'right'}}
],,
SortName : "ISO",
Sortorder : "ASC",
});
});
</스크립트>
맞춤 접이식, 사용자 정의 정렬 구현
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ ( "document"). ready (function () {
$ ( '#flexme1'). Flexigrid ({{
Colmodel : [
{display : 'iso', 이름 : 'Iso', 너비 : 40, 정렬 가능 : true, align : 'center'},
{display : 'name', 이름 : '이름', 너비 : 180, 정렬 가능 : true, align : 'left'},
{display : 'printable name', 이름 : 'printable_name', 너비 : 120, 정렬 가능 : true, 'left'},
{display : 'iso3', 이름 : 'ISO3', 너비 : 130, 정렬 가능 : true, align : 'left', hide : true},
{display : 'number code', name : 'numcode', 너비 : 80, 정렬 가능 : true, align : 'right'}}
], 너비 : 700, 높이 : 300, usepager : true, showtableToggleBtn : true, 제목 : "붕괴를 클릭하십시오"
});
$ ( '#flexme2'). Flexigrid ({{
Colmodel : [
{display : 'iso', 이름 : 'Iso', 너비 : 40, 정렬 가능 : true, align : 'center'},
{display : 'name', 이름 : '이름', 너비 : 180, 정렬 가능 : true, align : 'left'},
{display : 'printable name', 이름 : 'printable_name', 너비 : 120, 정렬 가능 : true, 'left'},
{display : 'iso3', 이름 : 'ISO3', 너비 : 130, 정렬 가능 : true, align : 'left', hide : true},
{display : 'number code', name : 'numcode', 너비 : 80, 정렬 가능 : true, align : 'right'}}
],,
SearchItems : [
{display : 'iso', 이름 : 'iso'},
{display : 'name', 이름 : 'name', isdefault : true}}
],,
SortName : "ISO",
Sortorder : "ASC",
제목 : "내 테스트 결과",
너비 : 700,
높이 : 300,
usepager : true, showtabletogglebtn : true, rp : 10
});
});
</스크립트>
고급 사용 :
1. 페이지 매김에 사용 된 저장된 절차
코드 사본은 다음과 같습니다.
프로 시저 작성 [dbo]. [spall_returnrows]
(
@SQL Nvarchar (4000),
@page int,
@recsperpage int,
@id varchar (255),
@SORT VARCHAR (255)
)
처럼
@str nvarchar (4000) 선언
set @str = '상단'+를 선택하십시오
캐스트 (@recsperpage as varchar (20))+
' * from ('+@sql+') t 여기서 t.'+
@id+
'안개가 아님 (상단 선택'+
cast ((@recsperpage*(@page-1)) as varchar (20))+
''+
@id+
' 에서 ('
+@sql+
') T9 주문 :'+
@정렬+
') 주문'+
@종류
@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 사용;
네임 스페이스 그리드 데모
{
/// <요약>
/// $ CodeBehindclassName $의 요약 설명 $
/// </summary>
[WebService (네임 스페이스 = "http://tempuri.org/")]
[WebServiceBinding (conformsto = wsiprofiles.basicprofile1_1)]
공개 클래스 GetDatasource4 : ihttphandler
{
Public Void ProcessRequest (HTTPContext Context)
{
context.response.contentType = "Text/Plain";
// 현재 페이지를 가져옵니다
문자열 currentPage = context.Request [ "page"];
// 페이지 당 표시되는 양을 얻습니다
문자열 pageshowlimit = context.request [ "rp"];
// 기본 키를 얻습니다
String tableId = context.Request [ "SortName"];
// 정렬 방법을 가져옵니다
문자열 ordermethod = context.request [ "Sortorder"];
// 필드를 필터링합니다
문자열 filterfield = context.request [ "Qtype"];
// 컨텐츠를 필터링 할 수 있습니다
String FilterfieldContext;
if (context.request.form [ "letter_pressed"] == null)
{
FilterfieldContext = "";
}
또 다른
{
FilterfieldContext = context.Request [ "Letter_Pressed"];
}
// 테이블의 총 행 수를 얻습니다
String taberowCount = sqlHelper.ExecutesCalar (configurationManager.AppSettings [ "SQL2"],
commandType.text,
"person.address에서"count (*)를 선택하십시오 "
) .toString ();
// 기본 SQL을 얻습니다
sqlparameter sql = 새로운 sqlparameter ( "@sql", sqldbtype.nvarchar);
//sql.value = "select * from person.address";
if (FilterfieldContext.length == 0 || Filterfield.length == 0)
{
sql.value = "select select select adressID, addressline1, addressline2, postalcode, person.address의 도시";
}
또 다른
{
문자열 [] tmp = filterfield.split ( ',');
SQL.Value = "SELECT SELECT ADDRESID, ADD
}
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 = 새로운 sqlparameter ( "@id", sqldbtype.varchar);
id.Value = tableID;
sqlparameter sort = 새로운 sqlparameter ( "@sort", sqldbtype.varchar);
Sort.Value = tableID;
// 테이블을 얻습니다
DataTable returnTable = SQLHELPER.ExecutedAtaset (ConfigurationManager.AppSettings [ "SQL2"],
CommandType.StordProcedure, "SPALL_RETURNROWS",
새로운 sqlparameter []
{
SQL, 페이지, recsperpage, id, sort
}). 테이블 [0];
context.response.write (dttoson2 (returnTable, currentPage, taberOwCount));
}
/// <요약>
/// JSON 형식 변환
/// </summary>
/// <param name = "dt"> DataTable Table </param>
/// <param name = "page"> 현재 페이지 </param>
/// <param name = "Total"> 총 얼마나 많은 행 수 </param>
/// <returns> </returns>
public static String dttoson2 (DataTable DT, 문자열 페이지, 문자열 총계)
{
StringBuilder jsonstring = new StringBuilder ();
jsonstring.appendline ( "{");
jsonstring.appendformat ( "페이지 : {0},/n", page);
jsonstring.appendformat ( "총 : {0},/n", Total);
jsonstring.appendline ( "행 : [");
for (int i = 0; i <dt.rows.count; i ++)
{
jsonstring.append ( "{");
jsonstring.appendformat ( "id : '{0}', cell : [", dt.rows [i] [0] .tostring ());
for (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}'", "<입력 유형 =/"버튼/"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 ( "}");
return jsonstring.toString ();
}
공개 부실이 있습니다
{
얻다
{
거짓을 반환합니다.
}
}
}
}
3 페이지 구현
코드 사본은 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codebehind = "complex-8.aspx.cs"inherits = "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>
<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 = "스타일 시트"href = "facebox/facebox.css"/>
<link type = "text /css"rel = "스타일 시트"href = "body.css" />
<script type = "text/javaScript"src = "facebox/facebox.js"> </script>
<script type = "text/javaScript">
$ ( "document"). ready (function () {
$ ( "#flex1"). Flexigrid
({
URL : 'getDatasource4.ashx',
데이터 유형 : 'JSON',
Colmodel : [
{display : 'jand
{display : '특정 주소 1', 이름 : 'addressLine1', 너비 : 140, 정렬 가능 : true, elign : 'left'},
{display : '특정 주소 2', 이름 : 'addressLine2', 너비 : 80, 정렬 가능 : true, aLign : 'left'},
{디스플레이 : '우편 번호', 이름 : 'Postalcode', 너비 : 80, 정렬 가능 : true, elign : 'left'},
{display : 'city', 이름 : 'city', 너비 : 80, 정렬 가능 : true, align : 'left'},
{display : 'opt', 이름 : 'opt', 너비 : 80, 정렬 가능 : true, 정렬 : '왼쪽'}}
],,
버튼 : [
{이름 : 'a', onpress : sortalpha},
{이름 : 'b', onpress : sortalpha},
{이름 : 'c', onpress : sortalpha},
{이름 : 'd', onpress : sortalpha},
{이름 : 'e', onpress : sortalpha},
{이름 : 'f', onpress : sortalpha},
{이름 : 'g', onpress : sortalpha},
{이름 : 'h', onpress : sortalpha},
{이름 : 'i', onpress : sortalpha},
{이름 : 'j', onpress : sortalpha},
{이름 : 'k', onpress : sortalpha},
{이름 : 'l', onpress : sortalpha},
{이름 : 'm', onpress : sortalpha},
{이름 : 'n', onpress : sortalpha},
{이름 : 'o', onpress : sortalpha},
{이름 : 'p', onpress : sortalpha},
{이름 : 'Q', Onpress : Sortalpha},
{이름 : 'r', onpress : sortalpha},
{이름 : 's', onpress : sortalpha},
{이름 : 't', onpress : sortalpha},
{이름 : 'u', onpress : sortalpha},
{이름 : 'v', onpress : sortalpha},
{이름 : 'w', onpress : sortalpha},
{이름 : 'x', onpress : sortalpha},
{이름 : 'y', onpress : sortalpha},
{이름 : 'z', onpress : sortalpha},
{이름 : '%', Onpress : Sortalpha}
],,
SearchItems : [
{display : 'city', 이름 : 'City', Isdefault : True},
{디스플레이 : '우편 번호', 이름 : 'Postalcode'}}
],,
usepager : true,
제목 : '고객 정보',
userp : true,
RP : 10,
showtabletogglebtn : true,
너비 : 700,
높이 : 200,
rpoptions : [10, 15, 20, 25, 40, 60], // 결과 수는 페이지 당 선택할 수 있습니다.
ProcMSG : '데이터가로드 될 때까지 기다려주세요 ...', // 프롬프트 메시지가 처리 중입니다.
RESIZIZAL : False, // 확장 가능합니까?
SortName : "addressID",
// Sortorder : "ASC", // 저장 프로 시저로 인해이 열을 사용할 수 없습니다.
});
});
함수 sortalpha (com) {
jQuery ( '#flex1'). flexoptions ({newp : 1, params : [{name : 'let
jQuery ( "#flex1"). FlexReload ();
}
함수 SSS (데이터)
{
var temp = 평가 (데이터);
// jQuery.facebox (temp);
jQuery.facebox ({ajax : 'default.aspx? id ='+temp})
}
</스크립트>
</head>
<body>
<테이블>
</테이블>
</body>
</html>