시스템에는 종종 많은 메뉴 항목이 있으며 각 메뉴 항목은 페이지에 해당합니다. 일반적으로 사용자는 일반적으로 사용되는 일부 기능 만 사용하면됩니다. 해당 기능을 찾기 위해 각 레벨에서 메뉴로 이동 해야하는 경우 실제로는 약간 번거 롭습니다. 특히 많은 메뉴가 있고 고객이 시스템 전체에 익숙하지 않은 경우, 브라우저와 유사한 즐겨 찾기 모듈이있는 경우 일반적으로 사용되는 메뉴를 연결하고 저장하고 매번이 즐겨 찾기의 홈페이지에서 해당 페이지를 찾으십시오. 실제로 노동 절약하고 매우 편리합니다. 이 에세이는 메트로닉 기반 부트 스트랩 개발 프레임 워크 에서이 즐겨 찾기를 구현한다는 아이디어를 소개합니다.
1. 시스템 즐겨 찾기 인터페이스 처리 효과
이 즐겨 찾기 기능을 실현하려면 시스템 페이지의 명백한 위치에 즐겨 찾기 모듈의 입구와 각 페이지의 해당 즐겨 찾기에 추가 할 수있는 기능도 배치해야합니다.
비교 후, 우리는 이러한 입력 기능을 페이지 제목 근처에 배치하여 다음 효과와 같이 쉽고 빠르게 수집 할 수 있도록했습니다.
페이지에서 [즐겨 찾기 추가] 버튼을 클릭하면 해당 페이지 제목과 즐겨 찾기 레코드에 연결을 추가합니다.
[즐겨 찾기보기] 함수에서 추가 한 페이지 링크를 표시하고 레코드 중 하나를 클릭하여 해당 페이지를 빠르게 입력하여 기능 모듈을 신속하게 입력해야 할 필요성을 깨달았습니다.
여기서 가장 중요한 것은 즐겨 찾기 레코드를 정렬하여 레코드를 위 또는 아래로 이동하여 인터페이스 처리를 준수 할 수 있습니다.
2. 시스템 즐겨 찾기의 구현 프로세스
시스템 페이지의 즐겨 찾기 기능의 위 인터페이스 효과를 이해 한 후 특정 구현 프로세스를 이해해야합니다. 먼저 즐겨 찾기, 페이지 제목, 페이지 주소, 정렬 및 기타 정보에 해당하는 정보를 저장하기 위해 테이블을 설계해야합니다.
데이터베이스 디자인 인터페이스는 다음과 같습니다.
우리는 분류 레코드가 10 진수 형식으로 저장되고 경도와 값으로 정렬되어 조정할 수있게되면 그 사이의 크기를 수정할 수 있습니다.
코드 생성 도구 Database2SHARP를 사용하여 기본 관련 코드 및 웹 컨트롤러 및 코드보기를 빠르게 생성 한 다음 프레임 워크에 통합하여 전체 모듈의 인터페이스를 확보하고 코드를 처리 할 수 있습니다.
일반적으로 데이터 표시 및 편집 인터페이스는 비교적 표준이므로 즐겨 찾기의 입구 표시에 대한 요구 사항이 다르므로 그림과 같이 간단한 항목 인터페이스를 표시하려면 목록 인터페이스에 뷰를 추가해야합니다.
이 인터페이스에는 상향 또는 하향을 포함한 레코드의 이동 처리가 포함되어 있습니다.
앞에서 언급했듯이, 우리의 레코드 분류는 주로 유형의 10 진수 필드를 통해 달성됩니다.
엔티티 클래스가 초기화되면 정렬 된 값을 현재 시간의 UNIX 타임 스탬프에 할당합니다.
위의 DateTimeToint 기능 코드는 아래에 나와 있으며 일반적으로 사용되는 처리 방법입니다.
/// <summary> /// 연장 시간 인터페이스, 쉐이핑 값을 반환 할 수 있습니다. /// </summary> /// <param name = "time"> </param> /// <returns> </returns> public int datetimetoint (이 dateTime 시간) {System.DateTime = timezone.currentTimezone.tolocaltime (새로운 시스템) 1)); return (int) (시간 - 시작 시간) .totalseconds; }레코드 움직임을 실현하려면 컨트롤러의 호출을 용이하게하기 위해 서비스 BLL 계층에서 움직이는 논리적 처리를 구현해야합니다.
/// <summary> /// Order 또는 Down Order /// </summary> /// <param name = "id"> 녹음 된 id </param> /// <param name = "moveUp"> 위로 이동하거나 아래로 이동, true </param> // <returns> </returns> public bool updown (문자열 id, bool moveup)
구현 된 기능 코드는 다음과 같습니다
/// <summary> /// Order 또는 Down Order /// </summary> /// <param name = "id"> record id </param> /// <param name = "moveup"> up 또는 move, true </param> // <returns> </returns> public bool updown (문자열 ID, bool moveUp) {// 순서 규칙을 설정합니다. bool result = false; webfavoriteInfo info = findByid (id); if (info! = null) {// 쿼리 문자열 조건 = ""; if (isdescending) {조건 = string.format ( "seq {0} {1}", moveUp? ">": "<", info.seq); } else {조건 = string.format ( "seq {0} {1}", moyup? "<": ">", info.seq); } var list = basedal.find (조건); 10 진수 NewSeq = 0m; switch (list.count) {case 0 : newSeq = info.seq; // 이미 상단 또는 하단에 있으며, 순서는 기본적으로 변경되지 않은 상태로 유지됩니다. 사례 1 : // 위 또는 아래의 레코드가 있다면 (isdescending) {newseq = moveUp? (목록 [0] .seq + 1m) : (list [0] .seq -1m); } else {newseq =! moveUp? (목록 [0] .seq + 1m) : (list [0] .seq -1m); } 부서지다; 사례 2 : // 중간 면적, 평균 값 NewSeq = (list [0] .seq + list [1] .seq) /2m; 부서지다; 기본값 : // 두 개 이상의 경우 if (moveUp) {newSeq = (list [list.count -2] .seq + list [list.count -1] .seq) /2m; } else {newSeq = (list [0] .seq + list [1] .seq) / 2m; } 부서지다; } // Unified Modification Order info.seq = NewSeq; 결과 = 업데이트 (info, info.id); } 반환 결과;}이러한 방식으로, 우리는 MVC 컨트롤러 에서이 BLL 계층 인터페이스를 추가로 캡슐화하여 페이지의 프론트 엔드에서 Ajax 통화 처리를 용이하게합니다. 캡슐화 코드는 다음과 같습니다.
/// <summary> /// 이동 레코드 이동 /// </summary> /// <param name = "id"> 레코드 ID </param> /// <param name = "up"> 업데이트는 사실입니다. 그렇지 않으면 거짓 </param> // <returns> </returns> if (! string.isnullorEmpty (id)) {try {result.success = bllfactory <webfavorite> .instance.updown (id, up); } catch (예외) {result.errormessage = ex.message; }} return tojsonContent (결과);}이런 식으로, 우리는 페이지의 앞쪽 끝에있는 인터페이스보기 에서이 메소드를 호출 할 수 있습니다.
먼저 아래와 같이 JS 바인딩을 통해 프론트 엔드 HTML 코드를 생성하십시오.
$ ( "#grid_body"). html ( ""); $. 각 (data.rows, function (i, item) {var tr = "<tr>"; tr + = "<td> <a class = 'btn btn-sm blue'href = ' + item.url +"'> " + item.title +"</t + = "; td>" "a href = 'javaScript :'btn-sm Green 'onclick =/"title ='move '> <span class ='glyphicon glyphicon-row-up icon-state danger '> btn-sm blue 'onclick =/"down ('" + item.id + " ')/"title ='move down '> <span class ='glyphicon glyphicon-arrow-down '> </span> </a> "; tr + ="</td> "; tr + ="</tr> "; $ ("#grid_body ");그런 다음 위 또는 아래 기능을 통해 처리하고 위치를 위 또는 아래로 이동하십시오.
var updownurl = "/webfavorite/updown"function up (id) {var postdata = {id : id, up : true}; $ .post (updownurl, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {showtips ( "성공적으로 움직입니다"); 새로 고침 (// 새로 고침 페이지 data} else {showtips (data.errormessage);}); $ .post (updownurl, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {showtips ( "성공적으로 이동"); 새로 고침 (// 새로 고침 page data}} else {showtips (data.errormessage);});}.이것은 우리가 필요한 움직임 순서를 구현합니다. 또한 추가 할 때 해당 사용자가 URL을 추가했는지 여부를 결정합니다. 존재하면 반복적으로 추가 할 필요가 없습니다. 프론트 엔드는 Ajax를 통해서만 호출 한 다음 응답하면됩니다.
이러한 코드의 구현을 통해 즐겨 찾기를 신속하게 관리하고 사용자를 신속하게 입력하여보다 친근한 경험을 제공 할 수 있습니다.
위는 편집기가 소개 한 부트 스트랩을 기반으로 한 페이지 링크 좋아하는 기능입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!