html.datagrid方法,DataGrid1.html

基本数据表格二

class="layui-icon layui-icon-sm">

//修改

function edit(obj) {

//obj通过行tool修改-lay-event

var row = obj ? obj : hg.table.datatable('test', 'getSelected');

if (row) {

hg.open('修改用户' + row.data.username, './DataGrid-add.html', 600, 400);

} else {

hg.msg('请选中一行数据，再操作！');

}

}

//删除

function del(obj) {

//obj通过行tool删除-lay-event

var row = obj ? obj : hg.table.datatable('test', 'getSelected');

if (row) {

hg.confirm("删除当前选中的用户，确定要删除吗？", function () {

//row.del(); //只删本地数据

hg.msg('删除成功！');

hg.table.datatable('test', 'reload');

});

} else {

hg.msg('请选中一行数据，再操作！');

}

}

//查看部门

function depts(obj, field) {

console.log(field); //点击的单元格

hg.msg(JSON.stringify(obj.data));

}

//监听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.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(data);

});

//日期控件

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(),

});

var tableCols = [

[{

field: 'id',

width: 80,

title: 'ID',

sort: true

}, {

field: 'username',

width: 80,

title: '用户名',

style: 'color: #ff5722;'

}, {

field: 'sex',

width: 80,

title: '性别',

sort: true

}, {

field: 'city',

width: 80,

title: '城市',

hide: true

}, {

field: 'sign',

title: '签名',

width: '30%',

minWidth: 100

}, {

field: 'experience',

title: '积分',

sort: true,

totalRow: true,

templet: function (d) {

if (d.experience > 500) {

return '' + d.experience + '';

}

return d.experience;

}

}, {

field: 'score',

title: '评分',

sort: true

}, {

field: 'classify',

title: '职业'

}, {

field: 'wealth',

width: 80,

title: '部门',

templet: function (d) {

return '查看'

}

}, {

field: 'flag',

width: 100,

title: '是否禁用',

templet: function (d) {

var checked = d.flag == 0 ? 'checked' : '';

return ''

}

}, {

field: 'right',

width: 120,

title: '操作',

templet: function (d) {

return '编辑 删除'

}

}]

];

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-140', ['filter', 'print', 'exports']);

一键复制

编辑

Web IDE

原始数据

按行查看

历史