代码之家 › 专栏 › 技术社区 › JohnnyBizzle

jqueryui sortable serialize或toarray方法-需要建议

jquery-ui jquery

JohnnyBizzle · 技术社区 · 15 年前

http://jqueryui.com/demos/sortable/#default

一天的大部分时间。我认为用新值更新数据库是大多数人想要的。当我使用ASP.NET时,我的想法是使用serialize将新值发送到更新数据库的页面。以下是脚本:

<script type="text/javascript">
    jQuery(function() {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
    });
    jQuery(function() {
    $("#sortable li:lt(3)").css("font-weight", "bold");
    });
    jQuery(function() {
    $("#cmdUpdateSortOrder").click(function() {
            $(".neworder").append("<br />");
            $("#sortable li.ui-state-default").each(function() {
                $(".neworder").append($(this).text() + "<br />");
            });
            var str = $("#sortable li.ui-state-default").sortable("serialize");
            alert(str);
            var result = $('#sortable li').sortable('toArray');
            alert(result);
        });
    });
</script>

第一个函数是从jQueryUI示例中提取出来的, 第二个函数突出显示前三行, 两个警报都告诉我:

[对象]

我希望有一个id和value对,比如0=3&1=2和;2=4等等。如果有人有更好的方法来做这件事,(ajax?)那将不胜感激。

2 回复 | 直到 5 年前

Tahbaza 15 年前

下面是如何解析排序表,以便通过jquery ajax发布到ASP.net MVC控制器操作。

$.ajax({
  type: 'POST',
  data: 'reviewCycleSwitchId=' + SWID + '&reviewCycleRoleIdList=' + parseRouteRoleIds(), 
  url:  root + saveRoutesPath,
  success: function(result) { // something you would do on success }
});

function parseRouteRoleIds() {
    var kys = '';
    $('.usedTiles li').each(function() {
        kys = kys + ',' + $('.rowId', $(this)).html();
    });
    return kys;
}

JohnnyBizzle 15 年前

这就是我最后所做的

<script type="text/javascript">
    jQuery(function() {
        var str;
        $("#sortable").sortable();
        $("#sortable").disableSelection();
        $("#sortable li:lt(3)").css("font-weight", "bold");
        $("#cmdUpdateSortOrder").click(function() {             
            str = $("#sortable li.ui-state-default").sortable();
            var params = '{order:"' + str[0].title + ',' + str[1].title + ',' + str[2].title + '"}';
            $.ajax({
                type: "POST",
                url: "NewsFrontPage.aspx/SubmitJSON", //URL and function to call
                data: params, // Set Method Params
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
                },
                contentType: "application/json; charset=utf-8", //Set Content-Type
                dataType: "json", // Set return Data Type
                success: function(msg, status) {
                    //Set Response outcome
                    $('#ajaxmsg')[0].innerHTML = msg.d;
                },
                error: function(xhr, msg, e) {
                    //this should only fire if the ajax call did not happen or there was an unhandled exception
                    alert(msg);
                }
            });
        });
    });   

</script>

注意:我使用属性'title'来存储被排序元素的id。