이전 기사에서 Bootstrap Metronic Development Framework의 경험 요약은 [i] 프레임 워크 개요 및 메뉴 모듈 처리, 전체 인터페이스 효과와 레이아웃, 메뉴 등을 포함한 부트 스트랩 개발 프레임 워크의 기본 요약으로 요약되어 있습니다.
데이터 인터페이스 디스플레이에서 표 형식 데이터의 디스플레이 및 페이징은 매우 일반적인 처리 작업입니다. Bootstrap의 스타일 레이아웃과 JQuery의 Ajax 데이터 처리를 사용하면 동적 디스플레이 및 데이터 페이징을 잘 수행 할 수 있습니다.
1. 목록 표시 및 페이징 처리 1) 데이터 표시 목록
많은 페이지에서 일반적으로 데이터베이스 레코드를 나열하고 페이지를 찍어야합니다.
왼쪽의 트리 목록의 다음 섹션은 오른쪽의 일반 데이터 쿼리 디스플레이 영역으로 쿼리 컨텐츠와 데이터 목록의 두 부분으로 나뉩니다. 쿼리 컨텐츠는 일반적으로 처리를위한 양식으로 배치됩니다. 사용자가 쿼리를 트리거하면 이벤트를 처리하고 MVC 배경의 컨트롤러에서 해당 데이터를 요청하여 페이지의 프론트 엔드로 반환하고 데이터를 표시하고 페이지를 표시합니다.
메뉴 페이지의 쿼리 코드에 표시된대로 다음이 표시됩니다.
<form id = "ffsearch"> <div> <div> <label> 디스플레이 이름 </label> <div> <input name = "whc_name"type = "text"> </div> </div> <div> <div> <labe> function id </label> <div> <input name = "whc_function"type = "text"> </div> </div> </div> </div> <div> <label> 웹 연결 주소 </label> <div> <입력 이름 = "wc_url"type = "text"> </div> </div> </div> <div> <label> 웹 메뉴 아이콘 </label> <div> <입력 이름 = "whc_webicon"type = "text"> </div> </form> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div>
페이지의 JS 코드에서 다음 스크립트와 같이 페이지가 초기화 된 후 데이터 처리를 처리합니다.
// 페이지 초기화 $ (function () {initjstree (); // 초기화 tree bindevent (); // 바인딩 이벤트 처리 검색 (currentPage); // 첫 번째 페이지 데이터 초기화 initDictItem (); // 초기화 사전 정보});데이터 표시를위한 HTML 코드는 다음과 같습니다. 테이블 헤더의 주요 내용이 표시되고 테이블 GRID_Body의 주요 내용은 스크립트에 의해 동적으로 빌드되고 표시됩니다.
<TABLE ID = "GRID"CellPadding = "0"CellPacing = "0"> <thead id = "grid_head"> <tr> <th> input type = "checkbox"onclick = "selectall (this)"> </th> <th> 디스플레이 이름 </th> <th> 정렬 </th> </th> <th> <web> <th> 웹 메뉴 아이콘 </th> <th> 시스템 번호 </th> <th> 작동 </th> </tr> </thaid> <tbody id = "grid_body"> </tbody> </table> <liD = 'grid_paging'> </ul> </div>
페이지가 준비된 후 검색 스크립트 함수를 통해 데이터 표시가 처리됩니다. 처리 할 때 먼저 일련 번호 양식 및 페이징 조건 정보의 조건을 MVC 컨트롤러로 전달하여 해당 목록 데이터를 얻고 인터페이스에 동적으로 바인딩하여 전체 처리 프로세스를 완료하십시오. 특정 코드 스크린 샷은 다음과 같습니다.
그리고 내부의 코드
tr += getActionHtml (item.id);
그런 다음 일부 작업 버튼은 스크립트를 통해 생성되며 인터페이스는 다음과 같습니다.
2) 데이터 페이징 처리
당사 페이지에 표시된 데이터는 일반적으로 고정 된 레코드가 아니므로 Pagination도 필요한 처리이므로 성능을 향상시키고 사용자 친화적 경험을 향상시킬 수 있습니다. 데이터 페이지 매김은 Bootstrap의 플러그인 Bootstrap Paginator를 사용하여 처리됩니다. 이 컨트롤은 많이 사용되며 매우 강력한 페이징 플러그인입니다.
Bootstrap Paginator Github 코드 주소는 https://github.com/lyonlai/bootstrap-paginator입니다
사용 예제를 소개 할 수 있습니다. http://lyonlai.github.io/bootstrap-paginator/를 참조하십시오.
이 컨트롤을 사용하는 경우 jQuery 및 Bootstrap 스타일 및 클래스 라이브러리를 소개 한 후 다음 코드 라인을 통해 추가 및 사용할 수 있습니다.
<스크립트 src = "/js/bootstrap-paginator.min.js"> </script>
이 제어 페이징은 페이지 클릭 및 페이지 변경 이벤트를 처리하여 구현할 수 있습니다.
페이지에 컨텐츠를 표시하려면 HTML 코드에 DIV를 추가하고 ID GRID_PAGEG로 UL 요소를 선언합니다. 코드는 다음과 같습니다.
<div> <ul id = 'grid_paging'> </ul> </div>
그런 다음 특정 JS 처리 코드는 다음과 같습니다.
MVC의 백그라운드에서는 페이징 조건을 얻고 프론트 엔드 페이지에서 사용자가 전달한 데이터 조건을 형성하여 이러한 매개 변수를 기반으로 해당 데이터를 얻고 클라이언트로 반환 할 수 있습니다.
이러한 처리는 매우 일반적이므로 처리를 위해 기본 클래스 컨트롤러에 넣을 수 있습니다. 특수 처리가 필요한 경우 서브 클래스 컨트롤러에서 Pagination 함수 FindWithPager를 다시 작성하십시오.
/// <summary> /// 조건에 따라 데이터베이스를 쿼리하고 객체 수집을 반환합니다 (Pagination Data Display) /// </summary> /// <returns> 객체 모음을 지정 </returns> public virtual actionresult findwithpager () {// 사용자가 권한을 가지고 있는지 확인하십시오. 문자열 여기서 = getPagerCondition (); PagerInfo PagerInfo = getPagerInfo (); list <t> list = basebll.findwithpager (여기서, pagerinfo); // json 형식 요구 사항 {Total : 22, 행 : {}} // JSON의 형식을 전달하여 var result = new {Total = PagerInfo.recordCount, rows = list}; return tojsoncontentDate (결과); }그중에서도 GetPagerInfo는 사용자가 전달한 페이지 매개 매개 변수를 얻는 것입니다. 아래 그림과 같이 위의 프론트 엔드 페이지에서 처리 된 URL 매개 변수를 여전히 기억하십니까?
url = "/menu/findwithpager? page =" + page + "& rows =" + rows;
특정 MVC 컨트롤러 GetPagerInfo 함수의 구현 코드는 다음과 같습니다.
/// <summary> /// 요청 매개 변수에 따라 Pagination Object 데이터 가져 오기 /// </summary> /// <returns> </returns> 보호 된 가상 PagerInfo getPagerInfo () {int pageIndex = request [ "page"] == null? 1 : int.parse (요청 [ "page"]); int pagesize = request [ "행"] == null? 10 : int.parse (요청 [ "행"]); PagerInfo PagerInfo = New PagerInfo (); PagerInfo.CurrenetPageIndex = PageIndex; PagerInfo.pagesize = pagesize; PagerInfo의 반환; }그런 다음 양식 조건 및 페이징 조건을 얻은 후 프레임 워크로 전달 된 비즈니스 로직 클래스로 전달됩니다. 이것은 이미 프레임 워크 하단의 지원 범주이며 계속 확장되지 않습니다.
list <t> list = basebll.findwithpager (여기서, pagerinfo);
최종 인터페이스 효과는 다음과 같습니다
2. 플러그인 jstree
이전 섹션에서는 트리 목록의 표시도 향상됩니다. 일반적으로 데이터가 계층 적 인 경우 트리 목록의 표시가 직관적으로 구조를 표시 할 수 있습니다. 따라서 많은 경우 트리 목록은 데이터의 분류 표시를 도와 줄 수 있습니다.
예를 들어, 사용자 데이터의 경우 사용자의 조직 구조 또는 역할을 분류 할 수 있으며 트리 목록을 통해 시각적으로 표시 될 수 있으므로 다른 유형의 사용자 목록을 찾을 때 쉽게 찾을 수 있습니다.
또는 사전 데이터 또는 지방 및 도시 데이터의 경우 트리 목록을 통해 표시 할 수도 있습니다.
JSTREE 컨트롤의 공식 주소는 https://www.jstree.com/입니다.
이 웹 사이트는 이미 JSTREE 컨트롤의 지침과 사례 설명에 대해 명확하게했습니다. 일반적으로 예제를 직접 참조하여 사용할 수 있습니다.
간단한 JSTREE 사용 코드는 다음과 같습니다
$ (function () {$ ( '#jstree_demo_div'). jstree ();});JSTREE의 이벤트의 경우 일반적으로 다음 코드를 통해 이벤트를 바인딩 할 수 있습니다.
$ ( '##jstree_demo_div'). on ( "Change.jstree", function (e, data) {console.log (data.Selected);});JSTREE의 경우 일반적으로 JSON 데이터를 사용하여 동적으로 바인딩합니다. 이 JSON의 데이터 형식 정의는 다음과 같습니다.
{id : "string"// 필수 부모 : "String"// 필수 텍스트 : "String"// Node Text Icon : "String"// 사용자 정의 상태 : {Opened : Boolean //는 Node Open Disabled : Boolean // 선택한 Node // IS Node Selected}, li_attr : {} // {} // // 생성 된 노드의 속성}일반적으로, 우리는 다음 스크립트를 사용하여 데이터를 지우고 바인딩합니다.
$ ( '#jstree_demo_div'). data ( 'jstree', false); // 데이터를 지우려면 // JSON DATA를 비동기로 바인딩해야합니다. $ .getJson (url, function (data) {$ ( '#jstree_demo_div') ({ 'core': {data ') : "datues" }). bind ( 'loaded.jstree', loadedFunction);});사용자에게 확인란을 제공하고 JSTREE의 선택한 상태를 설정 해야하는 경우 인터페이스 효과는 다음과 같습니다.
다음 코드와 같이 일반 초기화 함수를 변경해야합니다.
// checkbox $ .getJson (url, function (data) {컨트롤 .jstree ({ 'checkbox "], // 선택 상자'checkbox ': {cascade :", 3_state : // false}, // cascaded'core ': {data', "data": {replase}}}}} }). bind ( 'loaded.jstree', loadedFunction);이 둘을 결합하여 JSTREE 컨트롤의 초기화 바인딩을 JS Public Function BindjStree로 추가로 개선 할 수 있습니다.
// 지정된 JSON 데이터로 JSTREE 컨트롤을 초기화하고 TREENAME은 트리 DIV 이름입니다. URL은 데이터 소스 주소입니다. CheckBox는 CheckBox를 표시할지 여부, LoadedFunction (Treename, URL, Checkbox, LoadedFunction) {var Control = $ ( '#' + Treename) Control.Data ( 'JSTREE', OUGHT ' 인수 [2] || 거짓; // 확인란의 기본값을 false if (ischeck)로 설정합니다. {// 확인란 트리를 초기화 $ .getJson (url, function (data) {control.jstree ({ 'plugins': [ "checkbox"], // 선택 상자가 'checkbox': {cascade : ", Three_state : false}, // cascaded ': vont': vont ': rest': and a n't 's (cascade)": {cascade': // "Responsive": false}}}). bind ( 'loaded.jstree', loadedFunction); } else {// 일반 트리 목록의 초기화 $ .getJson (url, function (data) {control.jstree ({ 'core': { 'data': data, "테마": { "responsive": false}}}). bind ( 'loaded.jstree', loadedFunction); }}따라서 페이지가 jstree를 바인딩하면 코드를 단순화 할 수 있습니다.
// 조직 목록 기능 초기화 initDepTtreeView () {var treeUrl = '/user/getMyDepTjStreejson? userId =@session [ "userId"]'; bindjstree ( "jstree_div", treeurl); // 트리 제어의 이벤트 처리 변경 $ ( '#jstree_div'). on ( "change.jstree", function (e, data) {var icon = data.node.icon; loaddatabyou (data.Selected);}); }확인란 목록의 경우 초기화 코드는 다음과 같습니다.
// 모든 사용자 var treeUrl = '/function/getRoleFunctionjstreeByUser? userId =@session [ "userId"]'; bindjstree ( "tree_function", treeUrl, true); // 역할 데이터 권한, 모든 부서 초기화 첫 번째 treeUrl = '/user/getMyDepTjStreejson? userId =@session [ "userId"]'; bindjstree ( "tree_roledata", treeurl, true);
확인란의 경우 일반적으로 데이터를 초기화 한 다음 필요에 따라 트리 목록의 선택한 상태를 설정합니다. 이는 트리의 자주 초기화가 필요하지 않으므로 성능 및 응답 경험을 효과적으로 향상시킬 수 있습니다.
트리 목록을 초기화 한 후 선택 항목을 지우고 필요한 선택 항목을 설정해야합니다. 특정 코드는 다음과 같습니다. Uncheck_all 및 Check_Node 이벤트의 처리에주의를 기울입니다.
// 역할 데이터 권한 세트 (조직) 함수 initRoleData (id) {if (id! = "") {var treemenu = "tree_roledata"; $ ( '#' + treemenu) .jstree ( "uncheck_all"); // 모든 선택을 선택 취소 // 지정된 내용을 선택하십시오. treemenu) .jstree ( 'check_node', item); // node}); }}데이터를 저장하면 JSTREE 노드 선택 목록을 얻은 다음 데이터를 저장합니다. 특정 코드는 다음과 같습니다.
// 역할 데이터 권한 기능 SaveroLEDATA (roleID) {var oulist = $ ( '##tree_roledata'). jstree ( 'get_selected'); var url = '/roledata/updatedata? r =' + math.random (); var postdata = {relearid : roleid, oulist : oulist.join ( ',')}; $ .post (url, postdata, function (json) {initroledata (roleid);}). 오류 (function () {showtips ( "이 함수를 사용하는 것이 권한이 없으시면 관리자에게 연락하여 처리하려면");}); }결국, 나는 정기적 인 데이터 디스플레이와 데이터 페이징을 소개했습니다. JSTREE 바인딩, 이벤트 처리, 데이터 저장 및 기타 작업. 나는 당신의 지속적인 지원을 받기를 바랍니다. 학습을보다 구체적이고 실용적으로 만들기 위해 부트 스트랩 개발과 다양한 플러그인 사용과 관련된 핵심 포인트를 계속 소개하고 실제 가격 개발 프로젝트에 대한 유용한 언급을 제공 할 수 있습니다.
위의 내용은 부트 스트랩 [2] 목록 페이지 매김 처리 및 플러그인 JSTREE 사용을 기반으로 한 부트 스트랩 메트로닉 개발 프레임 워크의 경험 요약입니다. 모든 사람에게 도움이되기를 바랍니다. Wulin.com 웹 사이트에 대한 귀하의 지원에 감사드립니다. 나는 우리가 더 잘할 것이라고 믿는다!