jQuery UI Portlet 在数据库中保存状态答案

【问题标题】：jQuery UI Portlet Save State on DatabasejQuery UI Portlet 在数据库中保存状态
【发布时间】：2016-11-18 22:07:09
【问题描述】：

我们可以使用jQuery UI sortable - Portlets 拖放元素。我想将状态保存到 MySQL 数据库中。有什么办法（也许是 AJAX）吗？

我的 HTML：

<div class="column" id = "column-1">
First Category
 
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column" id = "column-2">
Second Category
 
  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>

<div class="column" id = "column-3">
Third Category
 
  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>
 
<div class="column" id = "column-4">
Fourth Category
 
  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
 
</div>

我的 JavaScript：

<script>
  $( function() {
    $( ".column" ).sortable({
      connectWith: ".column",
      handle: ".portlet-header",
      cancel: ".portlet-toggle",
      placeholder: "portlet-placeholder ui-corner-all"
    });
 
    $( ".portlet" )
      .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
 
    $( ".portlet-toggle" ).on( "click", function() {
      var icon = $( this );
      icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
      icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    });
  } );
  </script>

样式：

<style>
  body {
    min-width: 520px;
  }
  .column {
    width: 170px;
    float: left;
    padding-bottom: 100px;
  }
  .portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
  }
  .portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
  }
  .portlet-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
  }
  .portlet-content {
    padding: 0.4em;
  }
  .portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
  }
  </style>

脚本和样式表：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

对 PHP 的任何帮助将不胜感激。下面是当前状态的截图：

每当用户将元素从First Category拖放到Second Category时，它都应该在数据库中更新。

【问题讨论】：

标签： javascript php jquery jquery-ui drag-and-drop

【解决方案1】：

您需要在 portlet update 上传递 AJAX 请求。 API Documentation的详细信息。

【讨论】：

【解决方案2】：

我不太明白你的问题，甚至你所说的状态是什么意思，但我会在黑暗中试一试，假设你的意思是你想保存每个框相对于列的位置。

我会设置它，使每列都有一个名称/编号，每个框都有一个等级。

因此，每个框在初始化或更改时都会有一个等级（0 到 infiniti），它的父列，即列，会有一个名称

快速示例：

假设您将“新闻”框从第一个类别移动到购物框下方的第二个类别。
当您第一次查看它时，News 将被指定为['First', 1]。切换后将是['Second', 1]。

【讨论】：

那么它在 JavaScript 中的表现如何？
使用 Ajax 进行 POST 以将位置数据作为 JSON 发送。

【解决方案3】：

我找到了一种方法来保存 portlet 的状态（展开、折叠和定位） https://github.com/coyote333666/pjp

例如，如果 showOrHide = {"portlet-content-01":0,"portlet-content-02":0,"portlet-content-03":1,"portlet-content-04":0}

保存展开和折叠状态：

$( ".portlet" )
    .addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
    .find( ".portlet-header" )
    .addClass( "ui-widget-header ui-corner-all" )
    .prepend( "<span id='s1' class='ui-icon ui-icon-minusthick portlet-toggle'></span>");   
$( ".portlet-toggle" ).on( "click", function() {
    var icon = $( this );
    icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
    icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
    var x = icon.closest( ".portlet" ).find( ".portlet-content" ).attr("id"); 


    if ( showOrHide[x] == 1 ) 
    {
        showOrHide[x] = 0;
    } 
    else if ( showOrHide[x] == 0 ) 
    {
        showOrHide[x] = 1;
    }       


    var data = { 
                    'state' : JSON.stringify(showOrHide)                    
                }
    $.ajax({
        data: data,
        type: 'POST',
        url: '<?php echo("?" . S_PARAMETER_REDIRECTOR .S_FILE_PORTLET_UPDATE); ?>'
    });         
});

恢复展开和折叠状态：

$(window).ready(function()
{
    for (var k in showOrHide)
    {
        var last2 = k.slice(-2);
        if (showOrHide.hasOwnProperty(k)) 
        {
            if (showOrHide[k] == 1 ) 
            {
                $('#' + k).show();
            } 
            else if (showOrHide[k] == 0 ) 
            {
                $('#' + k).hide();
                $('#portlet-header-' + last2 + ' #s1.ui-icon-minusthick').removeClass('ui-icon-minusthick').addClass('ui-icon-plusthick');
            }
        }
    }
});

保存位置状态：

var showOrHide = <?php
    $sQuery =
    "
        SELECT portlets_state,portlets_left,portlets_right
        FROM portlet_user
        WHERE user_id               = " . fncSetInt($_SESSION["user_id"])   . ";
    ";
    $oRecordset = fncQueryPg($sQuery);  
    if(!empty($oRecordset[0]["portlets_state"]["VALUE"]))
    {
        echo($oRecordset[0]["portlets_state"]["VALUE"]);
    } 
    else
    {
        if(!empty($oRecordset[0]["portlets_left"]["VALUE"]))
        {
            $portlet = explode(",", $oRecordset[0]["portlets_left"]["VALUE"]);
        }
        if(!empty($oRecordset[0]["portlets_right"]["VALUE"]))
        {
            $section_2 = explode(",", $oRecordset[0]["portlets_right"]["VALUE"]);
            for($z=0; $z<sizeof($section_2); $z++)
            {
                array_push($portlet,$section_2[$z]);
            }   
        }
        for($z=0; $z<sizeof($portlet); $z++)
        {
            $key = str_replace('portlet_','portlet-content-',$portlet[$z]);
            $aPortlet[$key] = 1;
        }   
        echo(json_encode($aPortlet));
    } ?>;

$( ".column" ).sortable({       
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all",
    update: function (event, ui) {
        var list =  $(this).sortable("toArray").join(",");
        var data = { 
                    'section': this.id,              
                    'components': list
                    }
        $.ajax({
            data: data,
            type: 'POST',
            url: '<?php echo("?" . S_PARAMETER_REDIRECTOR .S_FILE_PORTLET_UPDATE); ?>'
        }); 
    }
});

恢复位置状态：

<div class="column" id="section-1">
<?php
    $sQuery =
    "
        SELECT portlets_left,portlets_right
        FROM portlet_user
        WHERE user_id               = " . fncSetInt($_SESSION["user_id"])   . ";
    ";
    $oRecordset = fncQueryPg($sQuery);
    $section_1 = $oRecordset[0]["portlets_left"]["VALUE"];
    $section_2 = $oRecordset[0]["portlets_right"]["VALUE"];


    if(!empty($section_1))
    {
        $portlet = explode(",", $section_1);
        for($z=0; $z<sizeof($portlet); $z++)
        {
            require_once($portlet[$z] . ".php");
        }
    }
    
?>
</div>
<div class="column" id="section-2">
<?php
    if(!empty($section_2))
    {
        $portlet = explode(",", $section_2);
        for($z=0; $z<sizeof($portlet); $z++)
        {
            require_once($portlet[$z] . ".php");
        }
    }
?>
</div>

和 portlet 更新：

if(isset($_POST["components"]) && isset($_POST["section"]))
{
    $sListePortlet = preg_replace('/\,+/', ',', trim($_POST["components"],','));
    if($_POST["section"] == 'section-1')
    {
        $sQuery =
        "
            UPDATE portlet_user
            SET portlets_left   = " . fncSetString($sListePortlet) . "
            WHERE user_id               = " . fncSetInt($_SESSION["user_id"])   . ";
        ";
        fncQueryPg($sQuery);
    }
    if($_POST["section"] == 'section-2')
    {
        $sQuery =
        "
            UPDATE portlet_user
            SET portlets_right  = " . fncSetString($sListePortlet) . "
            WHERE user_id               = " . fncSetInt($_SESSION["user_id"])   . "
        ";
        fncQueryPg($sQuery);
    }
}
if(isset($_POST["state"]))
{
    $sQuery =
    "
        UPDATE portlet_user
        SET portlets_state          = " . fncSetString($_POST["state"]) . "
        WHERE user_id               = " . fncSetInt($_SESSION["user_id"])   . ";
    ";
    fncQueryPg($sQuery);
}

请注意，您将每个 portlet 放在一个单独的文件中：portlet_99.php 其中 99 = 01,02,...

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。