xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > jquery拖拽排序,jquery实现table行拖动排序

jquery拖拽排序,jquery实现table行拖动排序

发布时间:2019-08-28 21:24编辑:计算机尝试浏览(140)

    今天成千上万后台列表为了有助于均选择拖拽排序的功力,对列表实行随机的排序。

    当今成千上万后台列表为了便利均使用拖拽排序的效果与利益,对列表实行自由的排序。

    话不作者说,代码如下,
    须求使用Jquery的如下JS:
    jquery.ui.core.js
    jquery.ui.widget.js
    jquery.ui.mouse.js
    jquery.ui.sortable.js
    jquery.js

    转自:

    话相当的少说 ,小编在网络找了一部分demo,经过相比较,今后把方便人民群众实用的二个demo列出来,基于jqueryUI.js

    话十分的少说 ,小编在网络找了一些demo,经过比照,今后把有助于实用的一个demo列出来,基于jqueryUI.js

    Html代码 
    <script src="${ctx}/scripts/jqueryUI/jquery.ui.core.js"></script> 
    <script src="${ctx}/scripts/jqueryUI/jquery.ui.widget.js"></script> 
    <script src="${ctx}/scripts/jqueryUI/jquery.ui.mouse.js"></script> 
    <script src="${ctx}/scripts/jqueryUI/jquery.ui.sortable.js"></script> 
    <script type="text/javascript"> 
    <!-- 
        $(document).ready(function(){ 
            //设置查询模块的 栏目代码选中 
            var v_lmdm = $("#wzxxfbgjpxForm #lmdmHidden").val(); 
            if(v_lmdm != '' && v_lmdm!=undefined){ 
                var t_select = $("#wzxxfbgjpxForm #lmdm")[0]; 
                var t_length = t_select.options.length; 
                for(var i = 0 ;i < t_length ; i ){ 
                    if(t_select.options[i].value==v_lmdm){ 
                        t_select.options[i].selected = "selected"; 
                    } 
                } 
            } 
            //右表的行增添 自由拖动排序功效 
            $("#rightTable tbody").sortable({stop:function(event,ui){}}); 
            $("#rightTable tbody").disableSelection(); 
            //给左右表增多鼠标移入移出 颜色 变化效果 
            $("#rightTable tbody tr").live("mousemove ",function(){ 
                $(this).css("background","#d1e5ff"); 
            }); 
            $("#rightTable tbody tr").live("mouseout ",function(){ 
                $(this).css("background",""); 
            }); 
            $("#leftTable tbody tr").live("mousemove ",function(){ 
                $(this).css("background","#d1e5ff"); 
            }); 
            $("#leftTable tbody tr").live("mouseout ",function(){ 
                $(this).css("background",""); 
            }); 
            //日期私下认可呈现当明天子 
            var beginDate = $("#wzxxfbgjpxForm #fbsjBegin").val(); 
            var endDate = $("#wzxxfbgjpxForm #fbsjEnd").val(); 
            if(beginDate == '' || beginDate == 'null'){ 
                $("#wzxxfbgjpxForm #fbsjBegin").val($("#wzxxfbgjpxForm #currentDate").val()); 
            } 
            if(endDate == '' || endDate == 'null'){ 
                $("#wzxxfbgjpxForm #fbsjEnd").val($("#wzxxfbgjpxForm #currentDate").val()); 
            } 
        }); 
         
        //从左表 到 右表  
        function leftToRight(temp,v_gjid){ 
            //当点击 左表 某行被入选时 
            if(temp.checked){ 
                var t_bt = $("#" v_gjid).next().attr("title"); 
                var t_zz =  $("#" v_gjid).next().next().attr("title"); 
                 
                var v_tr = '<tr id="' v_gjid '" class="' v_gjid '"><td class="rightGjid" style="text-align: center;"><input type="checkbox" name="itemsRight" checked="checked" onclick="javascript:rightToLeft('' v_gjid '')"></td>' 
                        '<td class="rightBt" title="' t_bt '">' t_bt '</td>' 
                        '<td class="rightZz" style="text-align: center;" title="' t_zz '">' t_zz '</td>' 
                        '<td class="rightSfxg" style="text-align: center;"><input type="checkbox" name="sfxg"></td>' 
                        '<td class="rightSfrd" style="text-align: center;"><input type="checkbox" name="sfrd"></td>' 
                        '</tr>'; 
                //插入新行到右表        
                $("#rightTable tbody").append(v_tr); 
            } 
            //当点击 左表 某行没被入选时 
            else{ 
                //删除相应的右表行 
                $("#rightTable ." v_jquery拖拽排序,jquery实现table行拖动排序。gjid).empty(); 
                $("#rightTable ." v_gjid).remove(); 
            } 
        } 
         
        // 从右表 到左表 
        function rightToLeft(v_id){ 
            //获得 右表中式茶食击行的 标题,笔者 
            var v_bt = $("#rightTable ." v_id).children().eq(1).attr("title"); 
            var v_zz = $("#rightTable ." v_id).children().eq(2).attr("title"); 
             
            $("#rightTable ." v_id).empty(); 
            $("#rightTable ." v_id).remove(); 
            var leftTr = $("#leftTable #" v_id); 
             
            if(leftTr !='' && leftTr != 'undefined' && leftTr != 'null' && leftTr.size()>0){ 
                $("#leftTable #" v_id).children().removeAttr("checked"); 
            } 
            else{//借使右表的行 在左表中从不,则需求增加新行 
                var trNum = $("#leftTable tbody tr").size(); 
                var no = trNum 1; 
                var trLeft = '<tr><td style="text-align: center;">' no '</td><td id="' v_id '" style="text-align: center;"><input type="checkbox" name="items" onclick="javascript:leftToRight(this,'' v_id '');"></td>' 
                        '<td title="' v_bt '">' v_bt '</td>' 
                        '<td style="text-align:center;" title="' v_zz '">' v_zz '</td></tr>'; 
                //插入新行到左表        
                $("#leftTable tbody").append(trLeft);    
            } 
             
        } 
        //保存右表已经 排好序的 稿件 
        function saveGjPx(){ 
            //排好序的 稿件ID数组 
            var gjidArr = new Array(); 
            $(".rightGjid").each(function(i){ 
                gjidArr[i]=$(this).parent().attr("class"); 
            }); 
            var btArr = new Array(); 
            $(".rightBt").each(function(i){ 
                btArr[i]=$(this).text(); 
            }); 
            var zzArr = new Array(); 
            $(".rightZz").each(function(i){ 
                zzArr[i]=$(this).text(); 
            }); 
            var sfxgArr = new Array(); 
            $(".rightSfxg").each(function(i){ 
                if($(this).children().attr("checked") == "checked"){ 
                    sfxgArr[i]="checked"; 
                }else{ 
                    sfxgArr[i]="false"; 
                } 
            }); 
            var sfrdArr = new Array(); 
            $(".rightSfrd").each(function(i){ 
                if($(this).children().attr("checked")=="checked"){ 
                    sfrdArr[i]= "checked"; 
                }else{ 
                    sfrdArr[i]="false"; 
                } 
            }); 
            var parameters = new Object(); 
            parameters["gjidArr"]=gjidArr.toString(); 
            parameters["zzArr"]=zzArr.toString(); 
            parameters["btArr"]=btArr.toString(); 
            parameters["sfxgArr"]=sfxgArr.toString(); 
            parameters["sfrdArr"]=sfrdArr.toString(); 
            parameters["lmdm"] = $("#wzxxfbgjpxForm #pxselectedLMXXs").val(); 
            $.post("${ctx}/wzxxfbgjpx/saveOrder.json", parameters,function(data){ 
                    if(data["message"]=='success'){ 
                        alert("保存成功!"); 
                    } 
            },"json"); 
        } 
         
        function checkQuery(){ 
            var lmdm = $("#wzxxfbgjpxForm #pxselectedLMXXs").val(); 
            var start = $("#wzxxfbgjpxForm #fbsjBegin").val(); 
            var end = $("#wzxxfbgjpxForm #fbsjEnd").val(); 
            if(lmdm == ''){ 
                alert("栏目代码无法为空!"); 
                return false; 
            } 
            if(start==''){ 
                alert("开首日期不能够为空!"); 
                return false; 
            } 
            if(end==''){ 
                alert("甘休日期不能够为空!"); 
                return false; 
            } 
            return true; 
        } 
         
            //选择 栏目 
        function px_toSelectLMEdit(){ 
            var opts = px_getDialogOptions();        
            var url="${ctx}/wzxxfbgjpx/selectLMTree"; 
            $.pdialog.open(url, "wzxxfbgjpx_selectLM_dialog", "选取栏目", opts);     
             
        } 
         
        function px_getDialogOptions(){ 
                var options = {}; 
                options.width = 640; 
                options.height = 360; 
                options.max = false; 
                options.mask = true; 
                options.maxable = false; 
                options.minable = false; 
                options.fresh = false; 
                options.resizable = false; 
                options.drawable = false; 
                options.close = true; 
                options.param = ""; 
                return options; 
        } 
    //--> 
    </script> 
    <div class="pageHeader"> 
        <form id="wzxxfbgjpxForm" action="${ctx}/wzxxfbgjpx/search" method="post" onsubmit="return navTabSearch(this)"> 
            <input type="hidden" id="lmdmHidden" name="lmdmHidden" value="${lmdm }"> 
            <input type="hidden" id="currentDate" value="<fmt:formatDate value='${now }' pattern='yyyy-MM-dd'/>"/> 
            <div class="searchBar"> 
                <table class="searchContent"> 
                    <tr>   
                        <td class="tdLabel">栏目分类:<font color="red"><b>*</b></font></td>      
                        <td> 
                            <table> 
                                <tr> 
                                    <td><input type="text" id="pxselectedLMMCs" name="pxselectedLMMCs" value="${pxLmmc }" readonly="readonly" size="30" /></td> 
                                    <td><input type="hidden" id="pxselectedLMXXs" name="pxselectedLMXXs" value="${pxLmdm }"><span onclick="px_toSelectLMEdit();"><a class="btnLook" href="#"><span>栏目</span></a></span></td> 
                                </tr> 
                            </table> 
                        </td> 
                        <td class="tdLabel">发表时间:<font color="red"><b>*</b></font></td>      
                        <td colspan="3"> 
                        <table> 
                            <tr> 
                                <td> 
                                    <input type="text" id="fbsjBegin" name="fbsjBegin"  class="date" pattern="yyyy-MM-dd" readonly="readonly" value="<fmt:formatDate value='${query.fbsjBegin}' pattern='yyyy-MM-dd'/>"/> 
                                </td> 
                                <td> 
                                    <input type="text" name="fbsjEnd" id="fbsjEnd" class="date" pattern="yyyy-MM-dd" readonly="readonly" value="<fmt:formatDate value='${query.fbsjEnd}' pattern='yyyy-MM-dd'/>"/> 
                                </td> 
                            </tr> 
                        </table> 
                        </td> 
                        <td> 
                            <button type="submit" onclick="return checkQuery();">检索</button><button type="reset">重置</button> 
                             
                        </td> 
                    </tr>  
                </table><br> 
                <span><font color="red">*仅可对栏目分类下的已揭橥的稿子进行联合排序;已排序的数额查询时不受发表时间约束;在排体系表中对数码实行上下拖动就能够达成排序。</font> </span> 
                </div> 
            </form> 
        </div> 
        <div class="pageContent" id="wzxxfbgjspDiv"> 
            <div class="panelBar"> 
                <ul class="toolBar"> 
                </ul> 
            </div> 
            <!-- 这里的layoutH是为了调解table的可观,如上边的分页条突然消失了,尝试扩充layoutH --> 
            <div layoutH="86" id="displayGjPxDiv" style="border: thin solid #99BBE8;overflow: hidden;" align="center"> 
                <div style="border: thin solid #99BBE8;width: 860px;height: 400px;overflow: auto"> 
                    <div style="width: 390px;float: left;"> 
                        <div style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>可选列表</b></div> 
                        <table  width="100%" border="1px" id="leftTable" > 
                          <thead> 
                              <tr bgcolor="#99BBE8"> 
                                <th width="20px"> </th> 
                                <th width="25px"/> 
                                <th width="255px" style="line-height: 20px;text-align: center;">稿件标题</th> 
                                <th width="90px" style="line-height: 20px;text-align: center;">作者</th> 
                              </tr> 
                           </thead> 
                           <tbody> 
                              <c:forEach items="${gjList}" var="item" varStatus="status"> 
                                  <tr> 
                                    <td style="text-align: center;">${status.index 1}</td>  
                                    <td id="${item.gjid }" style="text-align: center;"><input type="checkbox" name="items" onclick="javascript:leftToRight(this,'${item.gjid }');"></td> 
                                    <td align="left" title="<c:out value='${item.bt}'/>"><c:out value='${item.bt}'/></td> 
                                    <td style="text-align: center;" title="<c:out value='${item.zz}'/>"><c:out value='${item.zz}'/></td> 
                                  </tr> 
                              </c:forEach> 
                          </tbody> 
                        </table> 
                    </div> 
                 
                    <div style="width: 450px;float: right;"> 
                        <div style="line-height: 25px;text-align: center;background: #d1e5ff;"><b>排连串表</b></div> 
                        <table  width="100%" border="1" id="rightTable"> 
                          <thead> 
                              <tr bgcolor="#99BBE8"> 
                                <th width="25px"/> 
                                <th width="255px" style="line-height: 20px;text-align: center;">稿件标题</th> 
                                <th width="90px" style="line-height: 20px;text-align: center;">作者</th> 
                                <th width="60px">是或不是新稿</th> 
                                <th width="60px">是还是不是看好</th> 
                              </tr> 
                           </thead> 
                           <tbody> 
                              <c:forEach items="${pxList}" var="item" varStatus="status"> 
                                <tr id="${item.gjid }" class="${item.gjid }"> 
                                    <td class="rightGjid" style="text-align: center;"><input type="checkbox" checked="checked" name="itemsRight" onclick="javascript:rightToLeft('${item.gjid }');"></td> 
                                    <td class="rightBt"  title="${item.bt }">${item.bt }</td> 
                                    <td class="rightZz" style="text-align: center;" title="${item.zz }">${item.zz }</td> 
                                    <td class="rightSfxg" style="text-align: center;"><input type="checkbox" name="sfxg"></td> 
                                    <td class="rightSfrd" style="text-align: center;"><input type="checkbox" name="sfrd"></td> 
                                </tr> 
                             </c:forEach> 
                          </tbody> 
                        </table> 
                    </div> 
                </div> 
                <div style="margin: 10px;"><input type="button" onclick="javascript:saveGjPx();" value="保存"></div> 
            </div> 
             
        </div> 

    dragsort官方网站地址:

    先上html代码,很简单:

    先上html代码,很简单:

    左边的表格是源数据,选中后即会插入到右表,右表撤销勾选,会活动删除行,对应的左边行也会吊销选中。

    html代码如下(需引进jquery和dragsort.js):

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:jquery拖拽排序,jquery实现table行拖动排序

    关键词: JavaScript JQUERY jqueryUI 排序 拖拽排序