이전 기사에서 : 부트 스트랩을 기반으로 한 메트로닉 프레임 워크는 페이지 링크 좋아하는 기능을 구현하여 링크 좋아하는 기능의 구현과 좋아하는 레코드의 정렬을 소개합니다. 이 에세이는 주로 기능 버튼을 사용하여 수집 레코드를 이동합니다. 이 기능은 잘 구현되었지만 기사가 나온 후 일부 독자들은 직접 드래그를 사용하여 정렬하는 것이 더 편리하다고 지적했습니다. 따라서 목록 레코드의 정렬을 연구하여 정렬 가능한 오픈 소스 JS 구성 요소를 사용하여 드래그 정렬을 구현하는 방법을 소개했습니다. 이 에세이는 즐겨 찾기 분류를 연결 하는데이 구성 요소의 적용을 소개합니다.
1. 좋아하는 레코드의 분류 및 처리 검토
이전 에세이에 소개 된 즐겨 찾기 처리는 주로 사용자가 일반적으로 사용되는 기능 모듈을 신속하게 입력 할 수 있도록하는 것입니다. 즐겨 찾기 레코드의 수가 증가함에 따라, 우리는 우리의 사용을 용이하게하기 위해 합리적으로 정렬해야합니다.
원래 즐겨 찾기 레코드 정렬 인터페이스는 다음과 같습니다.
이 인터페이스에는 상향 또는 하향을 포함한 레코드의 이동 처리가 포함되어 있습니다.
구현 된 논리 코드는 주로 현재 레코드의 이전 및 후속 레코드의 정렬을 조정하여 위치 조정을 실현합니다. 코드는 다음과 같습니다.
/// <summary> /// Order 또는 Down Order /// </summary> /// <param name = "id"> 녹음 된 id </param> /// <param name = "moveUp"> Up 또는 Move Up, True </param> // <returns> </returns> public bool updown (String id, bool moveUp) {// rulting isdesc indesc indesc indesc inderced isdesc renget isdes false; webfavoriteInfo info = findById (id); if (info! = null) {// 쿼리 문자열 조건 = "" "; if (isdescending) {조건 = string.format ("seq {0} {1} ", moyup?"> ":"< ", info.seq); "<": ">", info.seq);} var list = basedal.find (조건); decimal newseq = 0m; switch (list.count) {case 0 : newseq = info.seq; // 이미 기본 또는 하단에 남아 있습니다. (list [0] .seq + 1m) : (list [0] .seq -1m);} else {newseq =! moveup? (목록 [0] .seq + 1m) : (list [0] .seq -1m);} break; case 2 : // 중간 면적, 평균 값 newSeq = (목록 [0] .seq + list [1] .seq)/2m; break; default : // if (moveup) {list.count -2]. 2m;} else {newseq = (list [0] .seq + list [1] .seq)/2m;} break;} // Unified Modification Order info.seq = newseq; result = update (info, info.id);}}}}위의 코드에서, 현재 이동 레코드의 위치를 결정한 다음 위 또는 아래에 정렬 된 레코드를 얻음으로써. 레코드 수가 0이면 상단 또는 하단에 있습니다. 1 레코드 인 경우 레코드에서 특정 값을 추가하거나 빼는 것은 새 분류 된 위치의 값입니다. 2 개의 레코드보다 더 큰 레코드 인 경우 가장 최근의 평균 및 평균 값에 대한 두 가지 레코드를 가져갑니다.
2. 즐겨 찾기의 드래그 및 분류
위의 처리는 기본 요구 사항을 충족 할 수 있으며 조정 위치도 정확합니다. 그러나 목록 항목을 분류 할 수 있다면 더 편리하고 친절합니다.
드래그 정렬을 기반으로 GitHub에서 상대적으로 높은 순위가 높은 JS 처리 구성 요소 (정렬 가능)를 발견했으며 사용하는 많은 사람들이 있다고 생각합니다.
이 컨트롤의 사용은 비교적 간단하며 코드는 다음과 같습니다.
<ul id = "항목"> <li> 항목 1 </li> <li> 항목 2 </li> <li> 항목 3 </li> </ul> var el = document.getElementById ( 'eImply'); var sortable = new Sortable (el);
먼저 Sortable과 통합 한 인터페이스를 먼저 살펴 보겠습니다.
이렇게하면 레코드를 이동하여 위치를 조정할 수 있습니다.
우리는 여전히 Pagination을 사용하여 검색 효율을 향상시키기 위해 목록을 표시합니다.
<div> <div> <div> <span> display </span> <select id = "rows"onchange = "changerows ()"> 옵션> 10 </옵션> <옵션 선택> 50 </옵션> 옵션> 100 </옵션> <옵션> 1000 </옵션> </select> </span> <span> 총 레코드 : <thantcount> <</span> <</span> <</span> id = 'TotalPageCount'> 0 </span> 페이지. </div> <hr/> <div id = "grid_body"class = 'list-group'> </div> <div> <ul id = 'grid_ping'> </ul> </div> </div> </div
여기서 우리는 GRID_Body에서 일련의 목록 레코드를 작성할 수 있습니다.
<div> <span aria-hidden = "true"> </span> <a id = "e1f462c6-c749-4258-836f-e13ee8c8acd7" href = "http : // localhost : 2251/user/index? tid = 2744dbf5-a648-47c1-9e9a-d8b40584389"> 시스템 사용자 정보 </a> <i> </i> </div>
레코드가 업데이트 된 후 정렬 가능한 구성 요소에는 아래와 같이 OnupDate 이벤트가 있습니다.
var grid_body = document.getElementById ( 'grid_body'); new Sortable (grid_body, {handle : '.glyphicon-move', 필터 : ".js-remove :".js-remove : 150, onupdate : function (/** event*/evt) {var list = []; // 컬렉션 대상을 구성합니다. {list.push ({ 'text': item.text, 'value': item.href});}); var url = "/webfavorite/editfavorite"; var postdata = {list}; $. post (url, postdata, function (json) {var data = $ .parsejson (json); 성공 "); refreshs (); // page data} else {showtips (data.errormessage);}});},});이런 식으로, 우리는 비즈니스 처리를 editfavorite 방법으로 넘겨 주는데,이 방법은 주로 통일 된 방식으로 목록 레코드를 업데이트합니다. 처리 로직은 먼저 이전 레코드를 삭제 한 다음 목록 수집 레코드를 추가하고 정렬 레코드를 적절한 순서로 설정하는 것입니다.
/// <summary> /// 레코드 목록 편집 /// </summary> /// <param name = "list"> 레코드 목록 </param> /// <returns> </returns> [httppost] public actionResult editfavorite (list <clistitem> list) {commonresult result = new CommonResult (); varnuser.id; dbransUser.id; bllfactory <webfavorite> .instance.createTransaction (); if (trans! = null) {try {// rucde var var and grnet.format ( "creater = '{0}'", userId); bllfactory <webfavorite> .instance.deletebycondition (condition, prass); {webfavoriteInfo info = new webfavoriteInfo (); info.title = item.text; info.url = item.value; info.seq = i-; info.creator = curreser.id.toString (); bllfactory <wecfavorite> .instance (infor, trans);} trans.commit (); true;} catch (예외) {result.errormessage = ex.message; trans.rollback (); loghelper.error (ex);}} return tojsonContent (result);}위의 것은 즐겨 찾기 목록을 끌고 정렬하는 개선입니다. 정렬 가능한 JS 구성 요소가 실제 프로젝트에서 합리적으로 사용하여 사용자의 신체 검사 결과를 향상시킬 수 있기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!