基本数据表格使用实例：
var tableCols = []; //cols表头参数请查看官方文档：https://www.layui.com/doc/modules/table.html#cols
var toolbar = [{
text: '添加',
layuiicon: '',
handler: function () {
hg.open('添加用户', './DataGrid-add.html', 600, 400);
}
},
{
text: '修改',
layuiicon: '',
handler: function (obj, row) {
if (row) {
hg.open('修改用户' + row.data.username, './DataGrid-add.html', 600, 400);
} else {
hg.msg('请选中一行数据，再操作！');
}
}
}, {
text: '删除',
layuiicon: '',
handler: function (obj, row) {
if (row) {
hg.confirm("删除当前选中的用户，确定要删除吗？", function () {
row.del(); //只删本地数据
hg.msg('删除成功！');
//obj.reload();
});
} else {
hg.msg('请选中一行数据，再操作！');
}
}
}
];
//初始化
var table = hg.table.datatable('test', '用户管理', 'data1.json', {}, tableCols, toolbar, true, 'full-190', ['filter', 'print', 'exports']);
//导出所有数据
var table = hg.table.datatable('test', '用户管理', 'data1.json', {}, tableCols, toolbar, true, 'full-190', ['filter','printall','exportsall']);
//获取选中行
var row = hg.table.datatable('test', 'getSelected');
var row = table.getSelected();
//重载表格
hg.table.datatable('test', 'reload');
或 table.reload(where); //where为url附加参数
//重置表格大小
hg.table.datatable('test', 'resize');
或 table.resize();
//打印任意数据
hg.table.printall(tableCols, data.rows);
hg.table.printall(layid); //打印当页数据
//导出任意数据
hg.table.exportfile(layid, data.rows);
树形组件使用实例：
//初始化
var tree;
hg.request('tree.json', function (data) {
if (data || data.count > 0) {
tree = hg.tree.datatree('treeid', data.data, true);
tree.onspread = function() {
var obj = this;
//模拟post后台数据，延迟0.5秒
setTimeout(() => {
hg.request('tree.json',function(data) {
if (data || data.count > 0){
obj.lazytree(data.data);
}
});
}, 500);
}
tree.onclick = function() {
var obj = this;
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.state); //得到当前节点的展开状态：open、close、normal
console.log(obj.elem); //得到当前节点元素
console.log(obj.data.children); //当前节点下是否有子节点
}
tree.oncheck = function() {
var obj = this;
console.log(obj.data); //得到当前点击的节点数据
console.log(obj.checked); //得到当前节点的展开状态：open、close、normal
console.log(obj.elem); //得到当前节点元素
}
}
});
//获得选中的节点
function getChecked(){
var checkData = tree.getChecked();
hg.msg(JSON.stringify(checkData));
}
//设置节点勾选
function setChecked(){
tree.setChecked(['hg-100101101','hg-100101102']);
}
//实例重载
function reload(){
tree.reload();
hg.msg('重载成功！')
}
基本日期框使用实例：
<input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
<input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
//基本日期控件
hg.datetime('#start', '#end', {
type: 'datetime',
value: hg.getdate('datetime', -30),
value2: hg.getdate('datetime', '23:59:59'),
min: hg.getdate('date', -365),
max: hg.getdate(),
});
组合日期框使用实例：
<input class="layui-input" autocomplete="off" placeholder="时间段" name="time" id="time">
//组合日期控件
hg.datetime2('#time','datetime',hg.getdate('date', -30),hg.getdate());
获取日期时间使用实例：
//获取过去30天前日期
hg.getdate('date', -30);
//获取当前日期
hg.getdate();
//获取当前时间
hg.getdate('datetime');
//获取当天结束时间
hg.getdate('datetime', '23:59:59');
网络请求使用实例：
//异步获取后台接口数据
hg.request('api/userinfo',{"id":"value"},'POST', function (data) {
if (data) {
//返回数据
}
});
监听Tab切换事件使用实例：
//监听Tab切换事件
hg.ontab('tab-card',function(){
var id = this.getAttribute('lay-id');
if (id === 'card1') {
//触发tab1
}
if (id === 'card2') {
//触发tab2
}
});
监听表单提交事件使用实例：
//监听表单提交事件
hg.form.onsubmit('sreach', function (data) {
var start = data.start;
var end = data.end;
if (start && end) {
if (start > end) {
hg.msg("时间范围错误，请重新选择!");
return false;
}
} else if (start || end) {
hg.msg("时间范围错误，请重新选择!");
return false;
}
hg.msg(JSON.stringify(data));
table && table.reload();
});
监听switch操作事件使用实例：
//监听switch操作事件
hg.form.onswitch('doflag',function(data){
hg.msg(data.elem.name+'开关checked：'+(data.elem.checked===true?'开启':'禁用'));
console.log(data.elem.checked);
console.log(data.elem.name);
console.log(data.elem.value);
console.log(data.othis);
});
表单自定义验证规则使用实例：
//表单自定义验证规则
hg.form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [/(.+){6,12}$/, '密码必须6到12位']
,content: function(value){
layedit.sync(editIndex);
}
});
打开弹出层使用实例：
//弹出最大化
hg.open('最大化','http://www.baidu.com','','',true);
//弹出自动宽高
hg.open('弹出自动宽高','http://www.baidu.com');
//弹出指定宽高
hg.open('弹出指定宽高','http://www.baidu.com',500,300);
添加tabs页使用实例：
//添加tabs页
hg.add_tab('在tab打开','member-list.html');
//添加tabs页并刷新页面
hg.add_tab('在tab打开刷新','member-del.html',true);
关闭弹出层使用实例：
//关闭弹出层
hg.close();
刷新父窗口使用实例：
//刷新父窗口
hg.base_reload();
请求进度条使用实例：
//请求进度条，id为iframe中tab-id
hg.NProgress(id);
弹出提示框使用实例：
//弹出提示框
hg.msg('添加成功！');
弹出半透明提示层使用实例：
//弹出半透明提示层
hg.msghide('上传成功！');
弹出询问框使用实例：
//弹出询问框
hg.confirm("删除当前选中的用户，确定要删除吗？", function () {
hg.msg('删除成功！');
});
弹出加载层使用实例：
//弹出加载层
var a = hg.load(function(){
var that = this;
setTimeout(function(){
//that.close(); //关闭加载层
a.close();
hg.msghide('清除服务器缓存成功.');
},2000);
});