真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

web中拖拽排序和java后臺交互實現(xiàn)方法示例

一、業(yè)務(wù)需求

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供赫山企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為赫山眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

1,在后臺的管理界面通過排序功能直接進(jìn)入排序界面

2,在排序界面能夠人工的手動拖動需要排序的標(biāo)題,完成對應(yīng)的排序之后提交

3,在app或者是前端就有對應(yīng)的排序?qū)崿F(xiàn)了

本文將詳細(xì)介紹web拖拽排序和java后臺交互的相關(guān)內(nèi)容,下面話不多說了,來一起看看詳細(xì)的介紹吧

二、頁面展示

將整體頁面效果展示出來之后如圖所示(頁面點擊確定之后的效果是與java后臺進(jìn)行交互的):

web中拖拽排序和java后臺交互實現(xiàn)方法示例

三、設(shè)計思路:

后臺:如果需要將排序的結(jié)果保存到數(shù)據(jù)庫,那么必須要修改數(shù)據(jù)庫中對應(yīng)的起碼一個字段(排序的序號sort),那么后臺需要至少接收的參數(shù)有sort和id兩個字段。我這邊采用的是將這兩個字段封裝到對象,并且采用集合的方式傳遞給后臺,因為對應(yīng)的修改必須是針對數(shù)據(jù)庫中需要排序的所有數(shù)據(jù)的操作。當(dāng)然可以根據(jù)不同的業(yè)務(wù)實施不同的排序方式

前端:a,實現(xiàn)拖拽功能;b,需要能夠提供實時的序列號sort和該序列號指定的id

四、前端設(shè)計:

1,下載插件:只需點擊超鏈接,下載drag.zip并解壓,就會自動轉(zhuǎn)為drag.js文件,引用即可

2,代碼實現(xiàn):

A>頁面中代碼:


 
  • ${movieParam.NAME }

                       
        

        
          
  
  
      
                 
            

    B>點擊排序的時候觸發(fā)事件(需要能獲取到當(dāng)前的序號和id值):

    //點擊排序:1,將當(dāng)前頁面裝到指定的div;2,給對應(yīng)的兩個隱藏的input框添加name屬性,便于后臺接收;3,為sort的隱藏的input賦予sort序號值
          function getSortList(){
            $(".M_sortMain").css("display","block"); //遮罩頁面顯示
      $(".sortOulMain").html($(".listMain").html()); //將當(dāng)前頁面裝到指定的div
      $("li").each(function(){
       var seq_attr = 'movieParams['+$(this).index()+'].sort';
       var id_attr = 'movieParams['+$(this).index()+'].id';
       $(this).children(".seqSort").attr('name',seq_attr); //為序號框添加name屬性
       $(this).children(".seqSort").val($(this).index()) //為sort的隱藏的input賦予sort序號值
       $(this).children(".idSort").attr('name',id_attr); //為id框添加name屬性
      })
           }

    C>拖拽效果的實現(xiàn),引用了提供的drag.js

    // 排序事件中的拖拽事件
      $('.sortOulMain').DDSort({
      target: 'li',
      floatStyle: {
       'border': '1px solid #ccc',
       'background-color': '#fff',
       'cursor': 'move'
      },
      //每次拖拽完成之后都會執(zhí)行的函數(shù)
      up: function () {
      $("li").each(function(){
       $(this).children(".seqSort").val($(this).index()); //改變?nèi)碌膕ort隱藏的input的序號值
       })
      }
          });

    五、后臺設(shè)計: 

    后臺采用的就是比較傳統(tǒng)的SSM框架了,主要就是對接收的參數(shù)的處理:

    A>SpringMVC中只需要注意對于參數(shù)的接收必須按照指定的name對應(yīng)即可(這里list集合中參數(shù)的封裝就不再強(qiáng)調(diào)了): 

      @RequestMapping("editSeq")
      public ModelAndView editSeq(MovieParamListForm movieParamList)throws Exception{  
        //判空操作這里省略了
        movieParamService.editSeq(movieParamList.getMovieParams());
      }

    B>Service層的處理省略了,主要是對movieParam中的id和sort兩個字段的操作,直接跳到Mybatis:

     
      
      update t_params 
       
        sort= #{var.sort}
       
      where id= #{var.id} 
      
      

    C>如果這時候發(fā)現(xiàn)自己的SQL寫的沒有問題但是在執(zhí)行的時候控制臺還是報錯了的話,那么必須要在連接數(shù)據(jù)庫的時候加上這樣一段代碼就行了:allowMultiQueries=true 這個是在操作數(shù)據(jù)庫批量修改時數(shù)據(jù)庫的一個問題

    總結(jié)

    以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對創(chuàng)新互聯(lián)的支持。


    網(wǎng)站題目:web中拖拽排序和java后臺交互實現(xiàn)方法示例
    標(biāo)題路徑:http://weahome.cn/article/jseggp.html

    其他資訊

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220(工作日)

    18980820575(7×24)

    提交需求

    返回頂部