• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

jqueryjsonselecttreeforrubyonrails

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
  #for product edit page category ajax usage
  def all
    def recursion(c)
      (0..c.children.size-1).each do |j|
        cc=c.children[j]
        $str+='"'+cc.name+'":{'
        if cc.children.size==0
          #level+=1
          $str+="\"\":#{cc.id}}"
        else
          recursion(cc)
        end
        if j!=(c.children.size-1)
          $str+=","
        else
          $str+="}"
        end
      end
    end    
    $str="{"
    $level=1
    $left=1
    $right=0
    top=Category.top
    (0..top.size-1).each do |i|
      c=top[i]
      $str+='"'+c.name+'":{'
      if c.children.size==0
        #level+=1
        $str+="\"\":#{c.id}}"
      else
        recursion(c)
      end
      if i!=(top.size-1)
        $str+=","
      else
        $str+="}"
      end
    end
    
    puts $str
    respond_to do |format|
      format.html { render :text=>$str}
      #format.js   { render :json => @options }
      #format.xml  { render :xml => @categories }
    end    
  end
该方法生成
{"办公":{"文具":{"":13},"电脑周边":{"U盘":{"":15},"鼠标/键盘":{"":16}}},"休闲":{"":11},"潮流":{"":12}}
这样的数据,为了配合http://code.google.com/p/jquery-option-tree/
进行显示
客户端例子
<h2>Example 1</h2>
<input type="text" name="demo1" />
<script type="text/javascript">
$(function() {
    var option_tree = {
       "Option 1": {"Suboption":200},
       "Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
           "Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
          }
    };
    
    option_tree={"办公":{"文具":{"":13},"电脑周边":{"U盘":{"":15},"鼠标/键盘":{"":16}}},"休闲":{"":11},"潮流":{"":12}}
    var options = {
            empty_value: 'null',
            //indexed: true,  // the data in tree is indexed by values (ids), not by labels
            preselect: {'demo1': ['办公']} // array of default values - if on any level option value will be in this list, it will be selected
                                                                        // be careful of variable types - '111' !== 111
        };
    $('input[name=demo1]').optionTree(option_tree,options);
});
</script>
<code><pre>
&lt;input type="text" name="demo1" /&gt;
    var option_tree = {
       "Option 1": {"Suboption":200},
       "Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
           "Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
          }
    };
    $('input[name=demo1]').optionTree(option_tree);
</pre></code>
最后我们要使用example的例子,使用ajax进行连动,这样就不用递归构造一个完整的json tree了,以上的东西就没用了,花了一个半上午,
递归和递归转非递归忘记了,是慢慢调出来了,不过,其实第一遍就差不多写对了,好像是自己没看清楚{}}对
这个可以做为一道考题来做

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ruby首字母大写发布时间:2022-07-14
下一篇:
Ruby语言学习笔记发布时间:2022-07-14
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap