easyui 中的treegrid添加checkbox

<script type="text/javascript">
function show(checkid){
      var s = ‘#check_‘+checkid;
      //alert( $(s).attr("id"));
      // alert($(s)[0].checked);
      /*选子节点*/
       var nodes = $("#test").treegrid("getChildren",checkid);
       for(i=0;i<nodes.length;i++){
          $((‘#check_‘+nodes[i].id))[0].checked = $(s)[0].checked;

       }
       //选上级节点
       if(!$(s)[0].checked){
         var parent = $("#test").treegrid("getParent",checkid);
         $((‘#check_‘+parent.id))[0].checked  = false;
         while(parent){
           parent = $("#test").treegrid("getParent",parent.id);
            $((‘#check_‘+parent.id))[0].checked  = false;
         }
       }else{
         var parent = $("#test").treegrid("getParent",checkid);
         var flag= true;
         var sons = parent.sondata.split(‘,‘);
         for(j=0;j<sons.length;j++){
            if(!$((‘#check_‘+sons[j]))[0].checked){
            flag = false;
            break;
            }
         }
         if(flag)
         $((‘#check_‘+parent.id))[0].checked  = true;
         while(flag){
             parent = $("#test").treegrid("getParent",parent.id);
            if(parent){
            sons = parent.sondata.split(‘,‘);
            for(j=0;j<sons.length;j++){
            if(!$((‘#check_‘+sons[j]))[0].checked){
            flag = false;
            break;
            }
           }
         }
          if(flag)
         $((‘#check_‘+parent.id))[0].checked  = true;
         }
       }
    }

    function formatcheckbox(val,row){

 return "<input type=‘checkbox‘ onclick=show(‘"+row.id+"‘)
id=‘check_"+row.id+"‘ "+(row.checked?‘checked‘:‘‘)+"/>" + row.name;
    }
    function init(){
     //去掉结点前面的文件及文件夹小图标
      $(".tree-icon,.tree-file").removeClass("tree-icon tree-file");
      $(".tree-icon,.tree-folder").removeClass("tree-icon tree-folder tree-folder-open tree-folder-closed");
    }

    //获取选中的结点
function getSelected(){
    var idList = "";
     $("input:checked").each(function(){
        var id = $(this).attr("id"); 

        if(id.indexOf(‘check_type‘)== -1 && id.indexOf("check_")>-1)
            idList += id.replace("check_",‘‘)+‘,‘;

     })
    alert(idList);
}

  </script>
</head>

  <body >
  <input type="button" value="showselectNode" onclick="getSelected();">
   <table id="test" title="Folder Browser" class="easyui-treegrid" style="width:400px;height:300px"
            url="treegrid_data.json"
            rownumbers="true"
            idField="id" treeField="name">
        <thead>
            <tr>
                <th field="name" width="160" formatter="formatcheckbox">Name</th>
                <th field="size" width="60" align="right">Size</th>
                <th field="date" width="100">Modified Date</th>
            </tr>
        </thead>
    </table>
  </body>
</html>
[{
    "id":"type_1",
    "name":"C",
    "size":"",
    "date":"02/19/2010",
    "sondata":"type_2,type_3",
    "children":[{
        "id":"type_2",
        "name":"Program Files",
        "size":"120 MB",
        "date":"03/20/2010",
        "checked":true,
        "sondata":"21,22",
        "children":[{
            "id":21,
            "name":"Java",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "sondata":"211,212",
            "children":[{
                "id":211,
                "name":"java.exe",
                "size":"142 KB",
                "date":"01/13/2010",
                "sondata":""
            },{
                "id":212,
                "name":"jawt.dll",
                "size":"5 KB",
                "date":"01/13/2010",
                "sondata":""
            }]
        },{
            "id":22,
            "name":"MySQL",
            "size":"",
            "date":"01/13/2010",
            "state":"closed",
            "sondata":"221,222,223",
            "children":[{
                "id":221,
                "name":"my.ini",
                "size":"10 KB",
                "date":"02/26/2009",
                "sondata":""
            },{
                "id":222,
                "name":"my-huge.ini",
                "size":"5 KB",
                "date":"02/26/2009",
                "sondata":""
            },{
                "id":223,
                "name":"my-large.ini",
                "size":"5 KB",
                "date":"02/26/2009",
                "sondata":""
            }]
        }]
    },{
        "id":"type_3",
        "name":"eclipse",
        "size":"",
        "date":"01/20/2010",
        "sondata":"31,32,33",
        "children":[{
            "id":31,
            "name":"eclipse.exe",
            "size":"56 KB",
            "date":"05/19/2009",
            "sondata":""
        },{
            "id":32,
            "name":"eclipse.ini",
            "size":"1 KB",
            "date":"04/20/2010",
            "sondata":""
        },{
            "id":33,
            "name":"notice.html",
            "size":"7 KB",
            "date":"03/17/2005",
            "sondata":""
        }]
    }]
}]
时间: 2024-10-12 17:28:48

easyui 中的treegrid添加checkbox的相关文章

DataGridView 中添加CheckBox和常用处理方式 .

DataGridView 中添加CheckBox和常用处理方式 文章1 转载:http://blog.csdn.net/pinkey1987/article/details/5267934 DataGridView中添加CheckBox控件主要采用两种方法 1.  通过在DataGridView的Columns中添加System.Windows.Forms.DataGridViewCheckBoxColumn类型的列.并可以设置该列相关的属性信息. 2. 在程序代码中直接添加相应的代码 Syst

SpringMVC+easyUI中datagrid行编辑模式(添加数据)实现_2014.5.2

一.概述 根据我们平常的习惯,一共有两种修改模式,一种是弹窗是修改,将原有的数据提取到dialog上,然后再重新提交到后台(好像easyui里面有个onAfterEdit,这个事件里面有三个参数,其中的一个参数就是发现数据是否有改变),而第二种方式就是实现行编辑模式,在原有的datagrid上添加一个空行,(本例是实现添加数据,不考虑原有数据). 二.实现 1.后台就不赘言了.直接上代码,但是我还是有个疑问,对于SpingMVC的Controller层次中的方法的**入参**,我在前台通过aja

easyUI中select下拉框添加option选项

使用jquery easyui的下拉列表combobox碰上问题,下拉列表的项都是从 数据库读出来的,然后我想在动态生成的项中添加一项:"<option value=''>=全部=</option>". 但怎么也添加不成功. 首先试了直接用jquery对该下拉列表进行添加操作: JavaScript code ? 1 2 3 4 5 6 7 8 $('#selUnin').combobox({         url: _callback_url + '&

ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork 制作一个添加新闻功能

本文将交大伙怎么集成ASP.NET MVC + 百度富文本编辑器 + EasyUi + EntityFrameWork来制作一个新闻系统 先上截图: 添加页面如下: 下面来看代码部分 列表页如下: 1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width&qu

SpringMVC+easyUI中datagrid分页实现_2014.5.1

一.概述 SpringMVC: 1.是面对方法级变量的,在操作起来会比struts方便一些(structs是类级变量),具体体现在了srpingMVC的注解上面, 如@RequstMapping("/login"),而且对于返回值ModelAndView这也是一大亮点,既可以返回一个页面(View),再加上@ResponseBody注解以后就可以返回一个      模型对象(也就是一种数据结构). 2.对于方法级传入的参数操作起来也相当方便,比如本例中,在加载DataGrid时,会像后

利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能

我准备在项目中实现该功能之前,google发现大部分代码都是利用一般处理程序 HttpHandler实现的服务器端数据的Excel导出,但是这样存在的问题是ashx读取的数据一般都是数据库中视图的数据,难免会含有方便操作的 主键ID这列的记录.现在项目需要在easyUI的DataGrid中显示的数据能全部导出Excel,包括DataGrid中的中文标题,其他的统统不 要. 完成该功能所需的工具和环境:Newtonsoft.Json序列化和反序列化类库.easyUI前端UI框架.HttpHandl

javascript如何动态添加checkbox复选框

javascript如何动态添加checkbox复选框:在实际应用中可能需要动态的添加复选框,下面就简单介绍一下如何实现此效果.单纯的创建一个复选框是很容易的,代码如下: var oCheckbox=document.createElement("input"); oCheckbox.setAttribute("type","checkbox"); oCheckbox.setAttribute("id","mayi&

EasyUI中datagrid实现显示、增加、 删除、 修改、 查询操作(后台代码C#)

2datagrid加载数据.代码如下所示 一.数据的显示 1新建HtmlPage2.html页面,引入相关文件.如下所示 <script src="easyui/js/jquery-1.8.2.min.js"></script>  <script src="easyui/js/jquery.easyui.min.js"></script>  <link href="easyui/css/themes/d

通过编写串口助手工具学习MFC过程&mdash;&mdash;(五)添加CheckBox复选框

通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个串口助手再次熟悉一下MFC,并做了一下记录,以便方便以后查阅.做的过程中多是遇到问题直接百度和谷歌搜索来的,所以很多都是不求甚解,知其然不知其所以然.另外做此工具只是为了熟悉了解,许多功能还没有完善!(开发工具VS2008) (五)添加CheckBox复选框 属性:Caption用于显示文本内容.