重新排序表行，更新数据库中的优先级

Question

我有一个表，其中的行是根据我的数据库中的 INT Priority 排序的。

每一行都有一个<input type="hidden" /> 和一个对数据库的ID 引用。它还有一些向上和向下箭头（.up 和 .down 类），使用以下 JavaScript 来移动行。

$(document).ready(function(){
    $(".up,.down").click(function(){
        var row = $(this).parents("tr:first");
        if ($(this).is(".up")) {
            row.insertBefore(row.prev());
        } else {
            row.insertAfter(row.next());
        }
    });
});

现在我的问题是，如何更新数据库中的优先级？我需要以某种方式获取 ID 的顺序并更新优先级列 - 有没有一个巧妙的解决方案？

Answer 1

在移动一行后，使用 jQuery 获取 ID 列表。比如：

var inputs = $("#myTable").find("tr").find("input");

// store each rows id in an array - this will be in the correct order
var ids = [];
inputs.each(function(){
    ids.push($(this).val());
});

然后将此列表传递给PageMethod 或WebService 并循环遍历列表，设置数据库中每一行的优先级。显然，您还需要考虑分页或您对项目应用的任何过滤。

更新：

您可能还想查看jQueryUI Sortable 以启用拖放排序。您将以相同的方式更新数据库。

更新 2： 这是一个简单的延迟函数。

var delay = (function () {
    var timer = 0;
    return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
    };
})();

然后按如下方式使用：

delay(function () {
  MySortFunction();
}, 300);

如果您在指定时间内再次调用，这将延迟函数 x 毫秒并取消之前的所有调用。

Answer 2

好吧，如果您在重新排序两行 () 时还更新了优先级编号（索引？）， 就在 row.insertBefore(row.prev()); 旁边的“向上”/“向下”处理程序中 然后你可以简单地通过服务器上的行掠夺并生成一个简单的"update x set priority = @priority where id = @id"

Answer 3

这可能有点矫枉过正，但我​​想随机向上或向下移动一行以上。仍然必须提交回服务器，并且这个 sn-p 没有

标记，但是应该很容易将输入处理为基于循环输入名称 form.hdrSort* 值的排序顺序。

<cfoutput>
<script type="text/javascript">
var maxHdr=#qX.recordCount#;
var curHdr=0;
$(document).ready(function(){
    bindReorder();//set with function because when the table gets regenerated, the ordering functionality gets stripped and has to be rebound to the content
});
function bindReorder(ok2do){
    if(ok2do==null) ok2do=true;
    $("input[id^='hdr']").each(function(){
        $(this).mask("?999").focus(function(){
            curHdr=parseInt($(this).val());//original value held in global js var
        }).blur(function(){
        var tVal=parseInt($(this).val());//entered value
        if(curHdr!=tVal){
            var tId =parseInt($(this).attr("id").substr(3));//id of changed value - this is the new value we don't change'
            if(tVal>#qX.recordCount# || tVal<1){//validate entered is in scope
                alert("please enter a positive number less than or equal to #qX.recordCount#");
                $(this).val(curHdr);
            }else if(ok2do){
                var lo=Math.min(tVal,curHdr);//lower of original and entered values
                var hi=Math.max(tVal,curHdr);//higher of original and entered values
                var upDn=1;//default that entered value is less than original value
                var aryHdrTbls=new Array(#qX.recordCount#+1);//zero based
                if(lo==curHdr) upDn=-1;
                $("input[id^='hdr']").each(function(i){
                    var checkVal=parseInt($(this).val());
                    var thisId=parseInt($(this).attr("id").substr(3));
                    if(checkVal<=hi && checkVal>=lo){
                        if(thisId!==tId) $(this).attr("value",checkVal+upDn);
                        else $(this).attr("value",checkVal);
                        aryHdrTbls[$(this).val()]=$("##tbl"+thisId).parent().html();
                    }
                });
                for(var i=lo; i<=hi; i++){
                    $("##td"+i).html(aryHdrTbls[i]);
                }
                    bindReorder(false);
                }
            }
        });
    });
}
</script>
<table width="80%">
<cfloop query="qX">
<tr>
<td id="td#qX.currentRow#">
    <table style="width:100%;border:1px solid gray;" id="tbl#qX.currentRow#">
        <tr>
            <td colspan="2" style="background-color:##dddddd;">
                <div style="float:right;"><input name="hdrSort#qX.currentRow#" id="hdr#qX.currentRow#" size="1" value="#qX.currentRow#">     <input type="button" width="3" value="go"></div></td>
        </tr>
        <tr>
            <td>#qX.currentRow# #qX.nada#</td>
            <td>#qX.nada# more your content original header #qX.currentRow#</td>
        </tr>
    </table>
</td>
</tr>
</cfloop>
</cfoutput>
</table>