标签： easyui

为 EasyUI TagBox 添加自动回车

在使用 EasyUI 的 TagBox 组件时，默认情况下，用户需要按回车键 (Enter) 才能添加标签。但有时用户可能会输入内容后忘记按回车，导致输入的标签未被添加。为了解决这个问题，我们可以通过 JavaScript 自动触发回车事件，让输入的内容自动转化为标签。

实现方法

使用 jQuery 触发 keydown 事件，并模拟按下 Enter 键，使得用户输入后能够自动完成标签添加。

代码示例

$('#tag').tagbox('textbox').trigger($.Event("keydown", { keyCode: 13 }));

说明

  • $('#tag')：获取 TagBox 组件。
  • .tagbox('textbox')：获取 TagBox 组件的输入框。
  • .trigger($.Event("keydown", { keyCode: 13 }))：模拟用户按下回车键。

进一步优化

可以在输入框失去焦点时自动触发回车，以确保输入的内容被正确添加为标签。

$('#tag').tagbox('textbox').on('blur', function() {
    $(this).trigger($.Event("keydown", { keyCode: 13 }));
});

这样做的好处

  1. 自动添加标签：用户输入后，即使忘记按回车，输入框失去焦点时也会自动添加标签。
  2. 提高用户体验：减少用户手动操作的步骤，使交互更加流畅。

结论

通过以上方法，我们可以让 EasyUI 的 TagBox 组件自动处理用户输入，防止用户忘记按回车导致标签未添加的问题。这不仅提升了用户体验，还能使应用更加智能和易用。

EasyUI中tree获取半选中和选中的项

EasyUI中tree有三种选中状态，分别是 checked（选中）、unchecked（未选中）、indeterminate（部分选中）。

其中 indeterminate 状态比较特殊，主要表示只有部分子节点选中的父级状态，表现为选中框是个圆点。

EasyUI 为这三种状态的获取提供了比较好的方法：

var nodes = $('#tt').tree('getChecked'); // 获取选中的节点
var nodes = $('#tt').tree('getChecked', 'unchecked'); //获取未选中的节点
var nodes = $('#tt').tree('getChecked', 'indeterminate'); // 只获取部分选中的节点
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']); // 同时获取选中的和部分选中的节点

asp.net core 解析 easyui的tree的json

easyui的tree组件支持从JSON加载数据，在asp.net中，我们可以从数据库读取相关数据，然后转换成json格式后返回给easyui的tree组件。下面是具体过程：

1、定义相关的节点类

public class PermissionTreeNode
{
    public int id { get; set; }
    public string? text { get; set; }
    public string? state { get; set; }
    public bool @checked { get; set; }
    public PermissionTreeNode[]? children { get; set; }
}

public class Permission
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public Role? Role { get;set; }
    public DateTime? CreatedAt { get; set; } = DateTime.Now;
    public DateTime? UpdatedAt { get; set; } = DateTime.Now;
}

public class Role 
{
    public int Id { get; set; }
    public string Name { get; set; } = string.Empty;
    public ICollection<Permission>? Permissions { get; set; }
    public ICollection<Account>? Accounts { get; set; }
    public DateTime? CreatedAt { get; set; } = DateTime.Now;
    public DateTime? UpdatedAt { get; set; } = DateTime.Now;
}

2、编写生成节点的函数 ParseJson，在这个函数里面加了权限处理，只添加当前用户有权限的节点：

public PermissionTreeNode ParseJson(PermissionTreeNode permissionTreeNode, List<Permission> rolePermissions, Role role)
{
    if (permissionTreeNode.children != null)
    {
        foreach (var menu in permissionTreeNode.children)
        {
            if (rolePermissions.Any(x => x.Name == menu.text) || role.Name == "超级管理员")
            {
                menu.@checked = true;
            }

            if (menu.children != null)
            {
                ParseJson(menu, rolePermissions, role);
            }
        }
    }

    return permissionTreeNode;
}

3、最后，我们在初始化tree的数据的时候，调用InitPermissionTree函数生成节点数据，再通过JsonSerializer.Serialize函数转换成json格式，不要忘记在转换后的json字符串两边分别加上[和]，不然easyui的tree组件加载不了。

public ContentResult InitPermissionTree(int roleId)
{
    var rolePermissions = _appDbContext.Permissions.Where(x => x.Role != null && x.Role.Id == roleId).ToList();

    var role = _appDbContext.Roles.Where(x => x.Id == roleId).FirstOrDefault();

    var jsonFile = Path.Combine(_env.WebRootPath, $"PermissionTree.json");
    var json = System.IO.File.ReadAllText(jsonFile);


    JsonSerializerOptions options = new JsonSerializerOptions();
    options.ReferenceHandler = default;
    var permissionTreeNode = JsonSerializer.Deserialize<PermissionTreeNode>(json, options);

    if (permissionTreeNode != null && role != null)
    {
        permissionTreeNode = ParseJson(permissionTreeNode, rolePermissions, role);
    }

    var result = "[" + JsonSerializer.Serialize(permissionTreeNode) + "]";

    return Content(result, "application/json");
}

我们可以使用F12浏览器开发者工具查看接口返回的JSON，如下:

  {
    "id": 1,
    "text": "工作总结生成管理系统",
    "checked": false,
    "children": [
      {
        "id": 100,
        "text": "内容管理",
        "state": "open",
        "checked": false,
        "children": [
          {
            "id": 101,
            "text": "文章管理",
            "checked": false,
            "children": [
              {
                "id": 102,
                "text": "文章生成",
                "checked": false
              },
              {
                "id": 103,
                "text": "编辑文章",
                "checked": false
              },
              {
                "id": 104,
                "text": "删除文章",
                "checked": false
              },
              {
                "id": 105,
                "text": "状态设置",
                "checked": false
              },
              {
                "id": 106,
                "text": "导出Word文档(文章管理)",
                "checked": false
              }
            ]
          },
          {
            "id": 200,
            "text": "素材库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 201,
                "text": "新增素材",
                "checked": false
              },
              {
                "id": 202,
                "text": "编辑素材",
                "checked": false
              },
              {
                "id": 203,
                "text": "删除素材",
                "checked": false
              },
              {
                "id": 204,
                "text": "导入导出",
                "checked": false
              },
              {
                "id": 205,
                "text": "素材审核",
                "checked": false
              }
            ]
          },
          {
            "id": 300,
            "text": "标签库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 301,
                "text": "创建标签",
                "checked": false
              },
              {
                "id": 302,
                "text": "编辑标签",
                "checked": false
              },
              {
                "id": 303,
                "text": "删除标签",
                "checked": false
              }
            ]
          },

          {
            "id": 400,
            "text": "模板库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 401,
                "text": "新增模板",
                "checked": false
              },
              {
                "id": 402,
                "text": "编辑模板",
                "checked": false
              },
              {
                "id": 403,
                "text": "删除模板",
                "checked": false
              }
            ]
          },

          {
            "id": 500,
            "text": "档案库",
            "state": "opened",
            "checked": false,
            "children": [
              {
                "id": 501,
                "text": "删除档案",
                "checked": false
              },
              {
                "id": 502,
                "text": "查看档案",
                "checked": false
              },
              {
                "id": 503,
                "text": "导入Word文档",
                "checked": false
              },
              {
                "id": 504,
                "text": "导出Word文档(档案库)",
                "checked": false
              },
              {
                "id": 505,
                "text": "移到文章管理",
                "checked": false
              }
            ]
          }
        ]
      },
      {
        "id": 600,
        "text": "系统设置",
        "state": "open",
        "checked": false,
        "children": [
          {
            "id": 601,
            "text": "帐号管理",
            "state": "open",
            "checked": false,
            "children": [
              {
                "id": 602,
                "text": "新增帐号",
                "checked": false
              },
              {
                "id": 603,
                "text": "编辑帐号",
                "checked": false
              },
              {
                "id": 604,
                "text": "删除帐号",
                "checked": false
              },
              {
                "id": 605,
                "text": "重置密码",
                "checked": false
              }
            ]
          },
          {
            "id": 700,
            "text": "部门管理",
            "state": "open",
            "checked": false,
            "children": [
              {
                "id": 701,
                "text": "新增部门",
                "checked": false
              },
              {
                "id": 702,
                "text": "编辑部门",
                "checked": false
              },
              {
                "id": 703,
                "text": "删除部门",
                "checked": false
              }
            ]
          },
          {
            "id": 800,
            "text": "角色管理",
            "state": "open",
            "checked": false,
            "children": [
              {
                "id": 801,
                "text": "新增角色",
                "checked": false
              },
              {
                "id": 802,
                "text": "编辑角色",
                "checked": false
              },
              {
                "id": 803,
                "text": "删除角色",
                "checked": false
              }
            ]
          }

        ]
      }
    ]
  }

这样，asp.net core 给 easyui 的 tree 组件动态生成数据就完成了。

jquery easyui datagrid 全选、反选、清除

//全选
function allselectRow(tableName) {
    $('#' + tableName).datagrid('selectAll');
}
//反选
function unselectRow(tableName) {
    var s_rows = $.map($('#' + tableName).datagrid('getSelections'),
            function(n) {
                return $('#' + tableName).datagrid('getRowIndex', n);
            });
    $('#' + tableName).datagrid('selectAll');
    $.each(s_rows, function(i, n) {
        $('#' + tableName).datagrid('unselectRow', n);
    });
}
//全清
function clearSelections(tableName) {
    $('#' + tableName).datagrid('clearSelections');
}
var grid = $('#tt1');
        var options = grid.datagrid('getPager').data("pagination").options;
        //当前页数
        var currentPage = options.pageNumber;
        //总条数
        var total = options.total;
        //当前页记录数
        var rows = options.pageSize;
        //总页数
        var max = Math.ceil(total / options.pageSize);


//全选选择
function checkAll() {
    $("input[name='menuid']").each(function() {
        $(this).attr("checked", true);
    });
};
//反向选择
function reversal() {
    $("input[name='menuid']").each(function() {
        $(this).attr("checked", !this.checked);
    });
}
//取消选择
function clearCheck() {
    $("input[name='menuid']").each(function() {
        $(this).attr("checked", false);
    });

easyui input 回车事件

easyui的input控件在输入完成后，可以处理回车事件以便进行下一步的操作，代码如下：

$('#keyword').textbox({
    inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
        keyup: function (event) {
            if (event.keyCode == 13) {
                _search();
            }
        }
    })
});