JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能
html
<table id="productDg"></table>
<!-- 表格工具栏开始 -->
<div id="productDg-toolbar" class="topjui-toolbar"
data-options="grid:{
type:'datagrid',
id:'productDg'
}">
<a id="add" href="javascript:void(0)">新增</a>
<a id="edit" href="javascript:void(0)">编辑</a>
<a id="delete" href="javascript:void(0)">删除</a>
<form id="queryForm" class="search-box">
<input type="text" name="name" data-toggle="topjui-textbox"
data-options="id:'name',prompt:'产品名称',width:100">
<input type="text" name="code" data-toggle="topjui-textbox"
data-options="id:'code',prompt:'产品型号',width:100">
<a id="queryBtn" href="javascript:void(0)">查询</a>
</form>
</div>
<!-- 表格工具栏结束 -->
<!-- 表格行编辑窗口 -->
<form id="editDialog"></form>
js
//进度条创建
function progressFormatter(value, rowData, rowIndex) {
var htmlstr = '<div id="p" class="topjui-progressbar progressbar" data-options="value:' + value + '" style="width: 398px; height: 26px;">';
htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
htmlstr += '<div class="progressbar-value" style="width: ' + value + '%; height: 26px; line-height: 26px;">';
htmlstr += '<div class="progressbar-text" style="width: 398px; height: 26px; line-height: 26px;">' + value + '%</div>';
htmlstr += '</div>';
htmlstr += '</div>';
return htmlstr;
}
//删除操作创建
function operateFormatter(value, row, index) {
var htmlstr = '<button class="layui-btn layui-btn-xs layui-btn-danger" οnclick="deleteRow(\'' + row.uuid + '\')">删除</button>';
return htmlstr;
}
//数据表格创建$(function () {
var productDg = {
type: 'datagrid',
id: 'productDg'
};
$("#productDg").iDatagrid({
fitColumns:true,
remoteSort:false,
url: '../../json/datagrid/product-list.json',
frozenColumns: [[
{field: 'name', title: '商品名称', sortable: true},
{field: 'code', title: '商品编号', sortable: true}
]],
columns: [[
{field: 'uuid', title: 'UUID', checkbox: true},
{field: 'spec', title: '规格型号', sortable: true},
{field: 'sale_price', title: '销售单价', sortable: true},
{field: 'rate', title: '完成率', sortable: true, formatter: progressFormatter},
{field: 'operate', title: '操作', formatter: operateFormatter, width:100}
]],
filter: [{
field: 'name',
type: 'textbox',
op: ['contains', 'equal', 'notequal', 'less', 'greater']
}, {
field: 'code',
type: 'combobox',
options: {
valueField: 'label',
textField: 'value',
data: [{
label: '2103',
value: '2103'
}, {
label: '5103',
value: '5103'
}, {
label: '1204',
value: '1204'
}]
},
op: ['contains', 'equal', 'notequal', 'less', 'greater']
}, {
field: 'spec',
type: 'combobox',
options: {
valueField: 'label',
textField: 'value',
multiple: true,
data: [{
label: 'KC-W200SW',
value: 'KC-W200SW'
}, {
label: '白色LR-1688BY-2',
value: '白色LR-1688BY-2'
}, {
label: '银灰色BCD-339WBA 339',
value: '银灰色BCD-339WBA 339'
}]
},
op: ['contains', 'equal', 'notequal', 'less', 'greater']
}]
});
//新增事件
$("#add").iMenubutton({
method: 'openDialog',
extend: '#productDg-toolbar',
iconCls: 'fa fa-plus',
btnCls: 'topjui-btn-blue',
dialog: {
id: 'userAddDialog',
title: '多选项卡布局的表单',
href: _ctx + '/html/complex/dialog_add.html', //对话框路径
buttonsGroup: [
{
text: '保存',
url: _ctx + '/json/response/success.json',
iconCls: 'fa fa-plus',
handler: 'ajaxForm',
btnCls: 'topjui-btn-brown'
}
]
}
});
//编辑事件
$("#edit").iMenubutton({
method: 'openDialog',
extend: '#productDg-toolbar',
iconCls: 'fa fa-pencil',
btnCls: 'topjui-btn-green',
grid: productDg,
dialog: {
title: '普通布局的表单',
height: 550,
href: _ctx + '/html/complex/dialog_edit.html?uuid={uuid}', //打开对话框路径
url: _ctx + '/json/datagrid/product-detail.json?uuid={uuid}',
buttonsGroup: [
{
text: '更新',
url: _ctx + '/json/response/success.json',
iconCls: 'fa fa-save',
handler: 'ajaxForm',
btnCls: 'topjui-btn-green'
}
]
}
});
// 表格工具栏删除事件
$("#delete").iMenubutton({
method: 'doAjax',
extend: '#productDg-toolbar',
iconCls: 'fa fa-trash',
btnCls: 'topjui-btn-brown',
confirmMsg: '这个是勾选复选框实现多条数据的Ajax删除提交操作，提交grid.param中指定的参数值',
grid: {
type: 'datagrid',
id: 'productDg',
uncheckedMsg: '请先勾选要删除的数据',
param: 'uuid:uuid,code:code'
},
url: _ctx + '/json/response/success.json'
});
//查询操作
$('#queryBtn').iMenubutton({
method: 'query',
iconCls: 'fa fa-search',
btnCls: 'topjui-btn-blue',
form: {id: 'queryForm'},
grid: {type: 'datagrid', 'id': 'productDg'}
});
});
//表格行删除
function deleteRow(uuid) {
$.iMessager.confirm('确认对话框', '您确定删除所选的数据？', function (r) {
if(r){
var postData = { uuid: uuid}; // 请求中携带的JSON数据
var url = _ctx + '/json/response/failure.json';//请求的地址
$.post(url,postData,function (res) {
$.iMessager.show({title: '我的消息', msg: res.message, timeout: 5000, showType: 'slide'});// '消息窗口'组件
if(res.statusCode == 200){
$("#productDg").iDatagrid('reload');//请求成功后刷新表格
}
},"JSON")
}
});
// $.iMessager.alert('操作提示', '请根据具体情况编写代码，如ajax删除请求，请求失败提示，请求成功提示，请求成功后刷新表格等！', 'messager-info');
}
具体的功能实现根据需求来。
EasyUI中文网：http://www.jeasyui.cn
TopJUI前端框架：http://www.topjui.com
TopJUI交流社区：http://ask.topjui.com