在更新面板中刷新 asp gridview 后，如何重新加载 javascript 和 css？答案

【问题标题】：How can I reload javascript and css after asp gridview is refreshed in updatepanel?在更新面板中刷新 asp gridview 后，如何重新加载 javascript 和 css？
【发布时间】：2017-10-23 11:43:27
【问题描述】：

我有一个 asp.net Gridview，用户可以在其中插入更新和删除的行。使用下面的代码，用户可以在 gridview 上上下拖动一行并更新位置。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function myFunction() {

    $("[id*=GridView1]").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
        },
        receive: function (e, ui) {
            $(this).find("tbody").append(ui.item);
        }
    });
});
</script>

我的问题是每当用户插入或更新行时，除非刷新页面，否则他们无法再拖动和重新排序任何行。我该如何解决这个问题？

【问题讨论】：

标签： javascript css asp.net gridview updatepanel

【解决方案1】：

添加新项目后需要使用refresh()

刷新() 返回：jQuery（仅限插件）

刷新可排序的项目。触发所有可排序项目的重新加载，从而识别新项目。此方法不接受任何参数。

http://api.jqueryui.com/sortable/#method-refresh

receive: function (e, ui) {
  $(this).find("tbody").append(ui.item);
  $("[id*=GridView1]").sortable("refresh");
}

应该有效

【讨论】：

我尝试将其添加到脚本中但仍然无法正常工作，

【解决方案2】：

我只需将 myFunction 放入 pageLoad 即可解决此问题，如下所示：

<script type="text/javascript" language="javascript">
    function pageLoad() {
        $("[id*=GridView1]").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'pointer',
            axis: 'y',
            dropOnEmpty: false,
            start: function (e, ui) {
                ui.item.addClass("selected");
            },
            stop: function (e, ui) {
                ui.item.removeClass("selected");
            },
            receive: function (e, ui) {
                $(this).find("tbody").append(ui.item);
            }
        })
    };
</script>

【讨论】：