1

2 番目のテキストエリアで単一のウィジェットの (li) JSON/位置を取得しようとしています。私はそれを見つけるために多くのことを試みましたが、正しく機能していません。

誰かが私を助けてくれるなら、私のコードを共有しています。グリッドスターを知らない人は、以下のリンクを参考にしてください。 http://gridster.net/demos/serialize.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Respo Temp</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<!-- Script -->
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>


<script type="text/javascript" src="js/jquery.gridster.min.js"></script>
<script type="text/javascript">
      var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [100, 100],
          widget_margins: [5, 5],
          helper: 'clone'
        }).data('gridster');

        //gridster.serialize();
        $('.js-seralize').on('click', function() {
            var s = gridster.serialize();
            $('#log').val(JSON.stringify(s));
        })


        //gridster.serialize();
        $('li').on('click', function($widget) {

            var t = gridster.serialize();
            $('#log_2').val(JSON.stringify(t));
        })

      });
    </script>
</head>

<body>
    <div id="wrapper">
        <header id="header">Header</header>

        <div id="main_container">
            <textarea id="log" class="log"></textarea>
            <button class="js-seralize">Serialize</button> <br/> <br/>            

            <textarea id="log_2" class="log"></textarea>
            <button class="js-seralize_2">Serialize</button> <br/> <br/>

            <div class="gridster">
                <ul>
                    <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">1</span></li>
                    <li data-row="1" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">2</span></li>
                    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">3</span></li>

                    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">4</span></li>
                    <li data-row="2" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">5</span></li>
                    <li data-row="2" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">6</span></li>

                    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"><span class="box_no">7</span></li>
                    <li data-row="3" data-col="2" data-sizex="1" data-sizey="1"><span class="box_no">8</span></li>
                    <li data-row="3" data-col="3" data-sizex="1" data-sizey="1"><span class="box_no">9</span></li>
                </ul>
            </div>
        </div>

    </div>
</body>
</html>
4

1 に答える 1

7

まず、各要素に一意の ID が必要です

serialize_paramsプラグインのオプションを使用して、各要素に保存されている params オブジェクトを変更できます

gridster = jQuery(".gridster > ul").gridster({
     /* other options*/
      serialize_params: function ($w, wgd) {              

          return {
              /* add element ID to data*/
              id: $w.attr('id'),
              /* defaults */
              col: wgd.col,
              row: wgd.row,
              size_x: wgd.size_x,
              size_y: wgd.size_y
          }

      }


  })

次に、項目を選択すると、gridster データ配列をフィルター処理して現在の ID を見つけることができます。jQuery.grep()この例で使用しています

  jQuery('.gridster ul li').click(function () {
      var id=this.id;
      var t = jQuery.grep(gridster.serialize(),function(item){
          return item.id==id;
      })
      jQuery('#log_2').val(JSON.stringify(t));
  })

DEMO

于 2013-12-26T12:36:44.647 に答える