• easyui data-options的使用


    easyui data-options的使用

    data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如:

    <div class="easyui-dialog" style="400px;height:200px"
    data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
    dialog content.
    </div>

    为什么要特殊提出一下这个属性呢? 通过这个属性,有个原来我们不好实现的功能,现在可以很轻松的就完成了。

    了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性(id,text,iconCls,checked,state,attribute,target)。而原先这个几个属性想要通过html的方式赋值实例的话,是不能完全做到的。attribute属性必须json的方式才能赋值。这也给我们开发带来了一下不便。而如今有了data-options这个属性,一切问题都迎刃而解了。

    定义一棵nide带有特殊属性的node就可以通过如下方式实现了

    <ul id="tt1" class="easyui-tree" data-options="animate:true,dnd:true">  
     
             <li>  
     
                 <span>Folder</span>  
     
                 <ul>  
     
                     <li data-options="state:'closed'">  
     
                         <span>Sub Folder 1</span>  
     
                         <ul>  
     
                             <li data-options="attributes:{'url':'xxxxx'}"> 
     
       <span><a href="#">File 11</a></span>  
     
     </li>  
     
     <li data-options="attributes:{'url':'xxxxx'}"> 
               <span>File 12</span>  
     
            </li>  
     
            <li>  
     
                 <span>File 13</span>  
     
             </li>  
     
        </ul>  
     
     </li>  
     
     <li data-options="attributes:{'url':'xxxxx'}"> 
        <span>File 2</span>  
     
    </li>  
     
    <li data-options="attributes:{'url':'xxxxx'}"> 
                  <span>File 3</span>  
     
                 </li>  
     
                 <li id="123" data-options="attributes:{'url':'xxxxx'}">File 4</li>  
     
                 <li>File 5</li>  
     
             </ul>  
     
         </li>  
     
         <li>  
             <span>File21</span>  
     
        </li>  
     </ul> 
     

    data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性,我们可以对easyui组件的实例化可以完全写入到html中,例如:

    1 <div class="easyui-dialog" style="400px;height:200px"
    2     data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
    3     dialog content.
    4 </div>

    为什么要特殊提出一下这个属性呢? 通过这个属性,有个原来我们不好实现的功能,现在可以很轻松的就完成了。

    了解easyui tree组件的童鞋估计都知道tree的node有他自己单独的属性(id,text,iconCls,checked,state,attribute,target)。而原先这个几个属性想要通过html的方式赋值实例的话,是不能完全做到的。attribute属性必须json的方式才能赋值。这也给我们开发带来了一下不便。而如今有了data-options这个属性,一切问题都迎刃而解了。

    定义一棵nide带有特殊属性的node就可以通过如下方式实现了

    1 <ul id="tt1" class="easyui-tree" data-options="animate:true,dnd:true">
    2         <li>
    3             <span>Folder</span>
    4             <ul>
    5                 <li data-options="state:'closed'">
    6                     <span>Sub Folder 1</span>
    7                     <ul>
    8                         <li data-options="attributes:{'url':'xxxxx'}">
    1     <span><a href="#">File 11</a></span>
    2 </li>
    3 <li data-options="attributes:{'url':'xxxxx'}">
    1             <span>File 12</span>
    2         </li>
    3         <li>
    4             <span>File 13</span>
    5         </li>
    6     </ul>
    7 </li>
    8 <li data-options="attributes:{'url':'xxxxx'}">
    1     <span>File 2</span>
    2 </li>
    3 <li data-options="attributes:{'url':'xxxxx'}">
    01                 <span>File 3</span>
    02             </li>
    03             <li id="123" data-options="attributes:{'url':'xxxxx'}">File 4</li>
    04             <li>File 5</li>
    05         </ul>
    06     </li>
    07     <li>
    08         <span>File21</span>
    09     </li>
    10 </ul>
  • 相关阅读:
    JSTL学习总结
    Spring 3 MVC: Create Hello World Application In Spring 3.0 MVC(reprint)
    如何查询端口号被哪个程序占用?
    php 共享内存
    php 消息队列
    php 快速fork出指定个子进程
    批量 kill mysql 中运行时间长的sql
    socket发送http请求
    TCP/IP、Http、Socket的区别
    文本协议和二进制协议
  • 原文地址:https://www.cnblogs.com/huangf714/p/5898675.html
Copyright © 2020-2023  润新知