Question

这是我的代码。我从jquery教程页面得到它并且它运行良好。现在我需要从表数据加载我的列表项

<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<style>
#sortable1,#sortable2,#sortable3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    margin-right: 10px;
    background: #eee;
    padding: 5px;
    width: 143px;
}

#sortable1 li,#sortable2 li,#sortable3 li {
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
</style>
<script>
    $(function() {
        $("ul.droptrue").sortable({
            connectWith : "ul"
        });
        $("ul.dropfalse").sortable({
            connectWith : "ul",
            dropOnEmpty : false
        });
        $("#sortable1, #sortable2, #sortable3").disableSelection();
    });
</script>
</head>
<body>
    <div style="font-weight: bold;">&nbsp;&nbsp;Available Medicines</div>
    <ul id="sortable1" class="droptrue">
        <li class="ui-state-default">Panadol</li>
        <li class="ui-state-default">Ciprofloaxin</li>
        <li class="ui-state-default">Piriton</li>
        <li class="ui-state-default">Zitricin</li>
        <li class="ui-state-default">Brufen</li>
    </ul>

    <div style="font-weight: bold;">Selected Medicines</div>
    <ul id="sortable2" class="dropfalse">
    </ul>
    <br style="clear: both">
</body>

请帮我解决这个问题。感谢

Answer 1

您可以进行JQuery AJAX调用以获取表数据，在成功回调函数中，您将填充列表。

$.ajax({
    url : "AJAX_POST_URL",
    type: "POST",
    success: function(data)
    {
       var rowData= data.split(",");
       $.each( rowData, function( index, value ){
$("#sortable1 ul li:last").append('<li class="ui-state-default">'+value +'</li>');
       });      
    }
});

Java方法应该返回逗号分隔的表数据。

如何使用Jquery从数据库填充列表。？

1 个答案: