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

好吧，如果你在重新排序两行（）时也更新prioirty数字（索引？），在row.insertBefore(row.prev());旁边的“向上/向下”处理程序中然后你可以简单地抢劫服务器上的行并生成一个简单的"update x set priority = @priority where id = @id"

Answer 3

这可能有点矫枉过正，但我想随机向上或向下移动一行多行。仍然必须提交回服务器并且此代码段没有＆lt; form＆gt;标记，但基于循环输入名称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>

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

3 个答案: