`
Supanccy2013
  • 浏览: 223896 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

easyui treegrid 复选框添加需要添加到字段中

阅读更多
//设置treegrid自适应
$(window).resize(function(){
    $('#treeGrid').treegrid('resize', {
        width: '100%'
    })
});

//js获取项目根路径,如: http://localhost:8088/jquery
function getRootPath(){
    //获取当前网址,如: http://localhost:8088/jquery/easyui/login.jsp
    var curWwwPath = window.document.location.href;
    //获取主机地址之后的目录,如: jquery/easyui/login.jsp
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    //获取主机地址,如: http://localhost:8088
    var localhostPaht = curWwwPath.substring(0, pos);
    //获取带"/"的项目名,如:/jquery
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPaht + projectName);
}

var treeGrid;
$(function(){
    InitTreeGrid();
});

/**
 * 初始化treegrid
 */
function InitTreeGrid(){

    treeGrid = $('#treeGrid').treegrid({
        url: getRootPath() + '/treeGrid',
        title: '编辑treeGrid',
        rownumbers: true,
        idField: 'id',
        treeField: 'text',
        width: '100%',
        fitColumns: true,
        columns: [[{
            title: '序号',
            field: 'id',
align: 'center',
//复选框
            checkbox: true
        }, {
            title: '名称',
            field: 'text',
            width: 280
        }, {
            title: '全名',
            field: 'fullname',
            width: 280,
            align: 'right'
        }, {
            title: '英文名',
            field: 'nameen',
            width: 280
        }, {
            title: '级别',
            field: 'level',
            width: 280
        }, {
            title: '状态',
            field: 'status',
            width: 280
        }]],
        toolbar: [{
            id: 'idAdd',
            text: '增加',
            iconCls: 'icon-add',
            plain: 'true',
            //按钮事件
            handler: function(){
            
            }
        }, '-', {
            id: 'idDelete',
            text: '删除',
            //disabled: true,
            iconCls: 'icon-remove',
            //按钮事件
            handler: function(){
            
            }
分享到:
评论

相关推荐

    解决 easyui treegrid 批量展开和关闭卡顿问题。

    数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载的data数据中的state属性变更,再重新执行 $('#tg').treegrid('loadData', data); 即可实现,亲测有效 无卡顿 注:无子项的请勿加state...

    jquery easyui treegrid demo 详解

    需要注意的是,由于 TreeGrid 在实际应用中可能涉及到服务器端的交互,上述的 `append`、`updateRow` 和 `deleteRow` 方法通常会发送 AJAX 请求到后端处理数据,而不是直接修改前端数据。这里为了简化示例,我们在...

    MVC easyui treegrid后台绑定树

    根据提供的信息,我们可以总结出以下知识点: ### 一、MVC模式与...综上所述,本例展示了如何在C# MVC项目中使用EasyUI TreeGrid控件,并介绍了相关的前后端实现细节,包括数据格式的要求、动态列的配置等关键点。

    EasyUI treegrid json格式生成方法

    最后,将处理后的节点添加到`treeData`数组中。 使用这个函数,你可以轻松地将任何层次结构的JSON数据转换为适用于EasyUI TreeGrid的格式。在实际应用中,你可能需要根据具体的数据结构和需求对这个函数进行调整。 ...

    数据结构之easyui-treegrid

    确保这些资源被正确地链接到页面中,以保证TreeGrid功能的正常运行。 2. 结构构建:在HTML中创建一个`<table>`元素,指定`id`,这个`id`将被用于初始化TreeGrid。 3. 初始化TreeGrid:在JavaScript中,通过`$('#...

    easyui-treegrid冻结右侧列插件.zip

    4. **集成到项目**: 使用这个插件,开发者需要将这两个文件引入到项目中,并在创建 TreeGrid 时,调用插件提供的方法来启用冻结右侧列的功能。可能的使用方式如:`$("#treegrid").treegrid("freezeRight", column...

    jquery easyui treegrid 拖拽demo

    jquery easyui treegrid 拖拽demo

    SSH+Easyui之TreeGrid树形展现数据

    在IT行业中,SSH和EasyUI是两个非常重要的技术框架,它们在Web开发中扮演着关键角色。SSH(Struts2 + Spring + Hibernate)是一个经典的Java Web开发栈,用于构建高效、可扩展的企业级应用程序。而EasyUI则是一个...

    Easyui Treegrid改变默认图标的方法

    `iconCls`字段的值应对应一个CSS类名,这个类名需要在CSS文件中定义,以指定图标样式。比如,`icon-ok`可能是代表任务完成的图标,而`icon-sum`可能是用于汇总的图标。 接下来,我们需要创建或修改`icon.css`文件,...

    Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

    在TreeGrid中添加复选框(checkbox)可以方便用户进行多项选择,比如批量删除、选中等操作。 实现TreeGrid上显示checkbox并取选定值的基本思路是利用formatter自定义渲染单元格,在特定的列中插入checkbox,并在...

    jQuery Easyui Treegrid实现显示checkbox功能

    首先,要实现 Treegrid 中的复选框功能,我们需要在列定义(columns)中增加一个字段,该字段将用于显示复选框。例如,我们可以创建一个名为 `IsChecked` 的隐藏字段,用于存储每个节点的选中状态。在初始化 ...

    EASYUI TREEGRID异步加载数据实现方法

    在EASYUI TreeGrid中,异步加载数据是一项重要的功能,允许用户在需要时动态获取数据,提高应用的性能和用户体验。 异步加载数据通常涉及到以下几个关键点: 1. **配置URL**:在TreeGrid的初始化参数中,`url`属性...

    在DataGrid中进行复选框的操作(全选和取消)

    首先,我们需要在`DataGrid`中添加复选框列。这可以通过自定义`DataGridTemplateColumn`来完成。在XAML中,你可以这样定义: ```xml <!-- 其他列定义 --> ``` 在这里,我们创建了...

    jQuery EasyUI的TreeGrid查询功能实现方法

    之后,通过TreeGrid组件的loadData方法将这些数据加载到TreeGrid中,从而实现了查询功能。 在具体实现中,首先需要确定查询条件,包括产品类型、关键词类型以及关键词内容。这些条件是通过combobox组件获取的用户...

    easyui的Treegrid扩展

    在传统的TreeGrid中,数据通常是以树状结构展示,每一行都可以展开或折叠,显示或隐藏子节点。然而,通过这个扩展,我们可以实现更丰富的交互功能,比如让多个TreeGrid之间可以进行数据的拖放操作。 首先,让我们...

    EASYUI TREEGRID

    easyui treegrid 优化,包括 以新背景色标识鼠标所指行

    EasyUI实现两个treegrid互相拖放

    本代码在EasyUI官网原treegrid拖放demo的基础上进行详尽的注释,并加以改动,如今可以实现两个treegrid之间互相拖放,本代码分别可以进行“剪切”和“复制”的功能,当前使用的是“剪切”功能,可通过改变treegrid-...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

Global site tag (gtag.js) - Google Analytics