Изменить порядок строк таблицы, обновить приоритет в базе данных - PullRequest
Новая
       3

Изменить порядок строк таблицы, обновить приоритет в базе данных

2 голосов
/ 24 февраля 2011

У меня есть таблица со строками, которая отсортирована по INT Priority в моей базе данных.

Каждая строка имеет <input type="hidden" /> с идентификатором ссылки на базу данных.У него также есть стрелки вверх и вниз (класс .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());
        }
    });
});

Теперь у меня вопрос, как мне обновить приоритет в базе данных?Мне нужно как-то получить порядок идентификаторов и обновить столбец приоритетов - есть ли для этого аккуратное решение?

Ответы [ 3 ]

1 голос
/ 24 февраля 2011

Используйте jQuery, чтобы получить список идентификаторов после перемещения строки.Что-то вроде: 

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);

Это задержит функцию на х миллисекунд и отменит все предыдущие вызовы, если вы вызовете ее снова в течение указанного времени.

0 голосов
/ 02 февраля 2012

Это может быть излишним, но я хотел случайным образом переместить строку более чем на одну строку вверх или вниз. Все еще приходится отправлять обратно на сервер, и этот фрагмент не имеет тега , но должно быть довольно легко обработать входные данные в порядке сортировки, основанном на циклическом просмотре значений входного имени 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>
0 голосов
/ 24 февраля 2011

хорошо, если вы также обновите prioirty число (индекс?) При переупорядочении двух строк (), прямо в обработчике для «вверх» / «вниз» рядом с row.insertBefore(row.prev()); тогда вы можете просто перебирать строки на сервере и генерировать простое "update x set priority = @priority where id = @id"

...