HISUI 前端框架开发指南

HISUI 是基于 jQuery 和 easyui 的 UI 组件库，专为医疗信息系统设计。

框架概述

HISUI 提供表单、表格、树形、布局、窗口等 jQuery UI 组件，基于 easyui 二次开发。

依赖： jQuery 1.11.3+、jquery.hisui.min.js、hisui.min.css、hisui-lang-zh_CN.js

引入资源

组件初始化模式

HISUI 组件通过以下两种方式初始化：

1. HTML 声明式（推荐）： 使用 hisui-* class + data-options 配置

  

    
姓名
  

2. JavaScript 编程式： 调用 easyui 方法（如 $().datagrid()）

$('#dg').datagrid({
    url: 'data.json',
    columns: [[{field:'name',title:'姓名',width:100}]]
});

$HUI.datagrid('#id', {...}) 与 $('#id').datagrid({...}) 等价，两种写法均可。

数据访问（$cm / $m）

HISUI 通过 $cm 和 $m 调用后台方法或 Query，需先引入 jQuery 再引入 websys.jquery.js。

// 异步调用类方法，返回 JSON
$cm({
    ClassName: "dhc.Test",
    MethodName: "getPatInfo",
    UserName: "张三"
}, function(jsonData) {
    console.dir(jsonData);
});

// 同步调用（第二参数传 false，阻塞浏览器，不推荐）
var jsonData = $cm({ClassName:"dhc.Test", MethodName:"getInfo"}, false);

// 调用后台 Query
$cm({
    ClassName: "web.SSUser",
    QueryName: "LookUpActive",
    page: 1, rows: 20
}, function(rs) {
    // rs => {"rows":[...],"total":110}
});

完整参数说明（ClassName、QueryName、ResultSetType、totalFields、type 等）见 references/基础-数据访问.md。 数据访问会对 insert、select、delete 等敏感关键词进行安全过滤。

组件参考索引

编写具体组件代码时，读取对应参考文件获取完整属性表、事件、方法和代码示例：

基础

布局

表单

表格及树

窗口

极速系列

放大镜（lookup） 是 HISUI 优化的下拉表格组件，继承自 comboq 与 datagrid，非 combogrid。IE8/IE11 下性能大幅提升，界面中所有 lookup 共用一个 grid，只保留当前激活的下拉框列表数据。输入即搜索需配置 isCombo:true + minQueryLen。

关键约定

命名规则

• 组件 class：hisui-<组件名>（如 hisui-datagrid、hisui-linkbutton）
• 图标 class：icon-w-<名称>（如 icon-w-find、icon-w-ok、icon-w-cancel、icon-w-edit、icon-w-delete、icon-w-save、icon-w-set）

按钮色系

• 默认蓝色：基础操作
• .green：通过、确认
• .yellow：警示、挂起
• .red：拒绝、删除
• .hover-dark：深色悬浮效果
• .big + plain:true：大图按钮

表格常用配置

• headerCls:'panel-header-gray'：灰色表头
• fitColumns:true：自适应列宽（需给每列设 width）
• pagination:true：分页
• rownumbers:true：行号

表格数据格式

{
  "rows": [{"code":"001","name":"张三"}],
  "footer": [{"name":"合计"}],
  "total": 1
}

验证类型（validatebox）

email、url、length[1,10]、remote['check.php','username']

最佳实践

• 统一在 $(function(){}) 或 $.parser.onComplete 中初始化组件
• 大数据量表格使用分页 pagination:true，避免频繁 DOM 操作
• 必填项用 required:true + validType 验证
• 耗时操作用 $.messager.progress 显示进度
• 操作反馈用 $.messager.alert 或 $.messager.show
• 禁用按钮防重复点击：stopAllEventOnDisabled:true
• HISUI 基于 jQuery 1.11.3，注意版本兼容
• IE 兼容：

如何使用参考文档

references/ 目录下每个文件对应一个组件的官方文档，包含完整属性表、事件、方法和代码示例。编写具体组件代码时，先读取对应参考文件获取准确 API。参考文件为原始官方文档，代码示例中可能含测试用 console.log，属正常现象。

版本： v20260606 适用场景： 医疗信息系统、管理系统、数据录入系统 技术基础： 基于 easyui 1.5+ 版本二次开发