No artigo anterior: a estrutura metronic baseada em Bootstrap implementa a função favorita do link da página, que introduz a implementação da função favorita do link e a classificação dos discos favoritos. Este ensaio usa principalmente botões de função para mover registros de coleta. Embora a função seja bem implementada, após o lançamento do artigo, alguns leitores apontaram que é mais conveniente classificar usando o arrasto direto. Portanto, a classificação dos registros da lista foi estudada e, assim, introduzindo como usar o componente JS de código aberto classificável para implementar a classificação de arrasto. Este ensaio apresenta a aplicação deste componente na conexão de classificação dos favoritos.
1. Revisão da classificação e processamento de discos favoritos
O processamento dos favoritos introduzido no ensaio anterior é principalmente para facilitar os usuários para inserir rapidamente um módulo de funções comumente usadas. À medida que o número de registros dos favoritos aumenta, é necessário classificá -los razoavelmente para facilitar nosso uso.
A interface de classificação de registros dos favoritos originais é a seguinte.
Essa interface contém o processamento de movimentos de registros, incluindo para cima ou para baixo.
O código lógico implementado ajusta principalmente a classificação dos registros anteriores e subsequentes do registro atual, realizando assim o ajuste da posição. O código é mostrado abaixo.
/// <summary> /// Atualize ou descendentes /// </summary> /// <param name = "id"> ID gravado </param> /// <param name = "moveup"> up ou movimentado, true </am param> // <returns> </returns> public bool updown (string id, streop move) {/ //fet Set Set Sett The Ordem (/Returns> Public BOOL Updoming (string id, strup move) {/ //fet Set Set Set Set Sett The Ordem (/Returns> Public, bool updown (string id, iSlOp? false; webfavoriteInfo info = findById (id); if (info! = null) {// Construa a consulta String condition = ""; if (isDescending) {condition = string.format ("seq {0} {1}", moveup? ? (Lista [0] .seq + 1m): (Lista [0] .seq - 1m);} else {newseq =! MoveUp? (Lista [0] .Seq + 1M): (Lista [0] .Seq - 1M);} Break; Caso 2: // Área média, pegue o valor médio newSeq = (list [0] .seq + list [1] .Seq)/2m; Break; padrão: // mais de dois casos se (moveu) {newseq = (2m; 2m;} else {newseq = (list [0] .seq + list [1] .seq)/2m;} break;} // Modificação unificada info.seq = newseq; resultado = atualização (info, info.id);} resultado;} Result;}No código acima, determinando a posição do registro de movimento atual e obtendo os registros classificados acima ou abaixo. Se o número de registros for 0, estará na parte superior ou inferior. Se for 1 registro, adicionar ou subtrair um determinado valor do registro é o valor da nova posição classificada. Se for um recorde maior ou igual a 2 registros, pegue os dois registros de seus valores mais recentes e médios.
2. Processo de arrastar e classificar os favoritos
O processamento acima pode atender aos requisitos básicos e a posição de ajuste também está correta. Mas se pudermos arrastar os itens da lista para classificar, será mais conveniente e amigável.
Com base na classificação de arrastamento, encontrei um melhor componente de processamento JS (classificável), que classifica relativamente alto no GitHub, e acho que muitas pessoas o estão usando.
O uso desse controle é relativamente simples, o código é o seguinte.
<ul id = "itens"> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> </ul> var el = document.getElementById ('itens'); var sTelable = novo classificável (el);Vamos primeiro olhar para a interface que finalmente interi ao classificável.
Dessa forma, podemos ajustar a posição movendo o registro.
Ainda usamos a paginação para exibir listas para melhorar a eficiência da recuperação.
<div><div><div><span>Display</span><select id="rows" onchange="ChangeRows()"><option>10</option><option selected>50</option><option>100</option><option>1000</option></select><span> records</span><span>Total records: </span><span id='totalCount'>0</span>, total page count: <span id = 'totalpageCount'> 0 </span> páginas. </div> <hr/> <div id = "grid_body" class = 'list-group'> </div> <div> <ul id = 'grid_paging'> </ul> </div> </div> </div>
Aqui podemos criar uma série de registros de lista em grid_body.
<div> <span Aria-hidden = "true"> </span> <a id = "e1f462c6-c749-4258-836f-e13ee8c8acd7" href = "http: // localhost: 2251/usuário/index?
Depois que o registro é atualizado, o componente classificável possui um evento OnUpdate para manipular, como mostrado abaixo.
var grid_body = document.getElementById ('grid_body'); new Sortable (grid_body, {handle: '.glyphicon-move', filtro: ".js-remove", animação: 150, OnUpdate: function (** Event*/evt) {var list = []; // constructe o objeto de coleta $ (** ** list) {var = {list.push ({'text': item.text, 'value': item.href});}); var url = "/webfavorite/editFavorite"; var postData = {list: list}; $. post (url, pós -dados, função (json) {var data = $. {// ShowTips ("Operação é bem -sucedida"); refresch (); // Atualizar dados da página} else {showTips (data.erRormessage);}});},});Dessa forma, entregamos o processamento de negócios ao método EditFavorite, que atualiza principalmente os registros da lista de maneira unificada. A lógica de processamento é excluir primeiro os registros anteriores, adicionar os registros de coleta de listas e definir seus registros de classificação para o pedido apropriado.
/// <summary> //// editar lista de registro /// </summary> /// <param name = "list"> List </param> /// <lorpns> </returns> [httppost] public ActionResult editFavorite (list <listitem> list) {CommonResult = result.nResid; BllFactory <WebFavorite> .instance.createTransaction (); if (trans! = Null) {tente {// excluir primeiro e gravar var condition = string.format ("cretor = '{0}'", userID); BllFactory <Bavorite> .Instance.DeleteByCondition (condicionado); trans); trans); trans); trans); trans); trans); Item na lista) {webFavoriteInfo info = new webFavoriteInfo (); info.title = item.text; info.url = item.value; info.seq = i-; info.creator = currentSert.id.tostring (); bllFactory <webvilavorite> .InSance.Insert (, info; true;} catch (Exceção ex) {resultado.errorMessage = ex.Message; trans.rollback (); LogHelper.error (ex);}} retornar TOJSONCONTENT (resultado);}O exposto acima é uma melhoria para arrastar e classificar a lista de favoritos. Espero que o componente JS classificável possa ser usado razoavelmente em projetos reais para melhorar os resultados do exame físico de nossos usuários. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!