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" onclick="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

JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能的更多相关文章

  1. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  2. JQuery Easyui/TopJUI 多表头创建

    JQuery Easyui/TopJUI 多表头创建 废话不多说,直接贴上代码. html <div data-toggle="topjui-layout" data-opt ...

  3. 【BootStrap】--具有增删改查功能的表格Demo

    [BootStrap]--具有增删改查功能的表格Demo 目录(?)[+] 前言 版本一 样式 代码 版本二 样式 代码 版本三 样式 代码 总结 前言 bootstrap的表格样式,有类似EasyU ...

  4. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(三):两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  5. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(二)

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  6. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一)

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  7. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(四):自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  8. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  9. django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能

    1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...

随机推荐

  1. 关于NIO编程

    NIO概述 什么是NIO? Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从Java 1.4开始),Java NIO提供了与标准IO不同的IO工作方式. Ja ...

  2. Python成长之路第一篇(2)__初识列表和元组

    可以将列表和元组当成普通的“数组”,他能保存任意数量任意类型的Python对象,和数组一样都是通过数字0索引访问元素,列表和元组可以存储不同类型的对象,列表和元组有几处重要区别.列表元素用([])包括 ...

  3. blog首页视图

    声明:此Django分类下的教程是追梦人物所有,地址http://www.jianshu.com/u/f0c09f959299,本人写在此只是为了巩固复习使用 django 是如何处理 http 请求 ...

  4. RQNOJ 671 纯洁的买卖:无限背包

    题目链接:https://www.rqnoj.cn/problem/671 题意: ALEJ要通过倒卖东西来赚钱. 现在他有m元经费. 有n种物品供他选择,每种物品数量无限. 第i件物品的买入价为c[ ...

  5. html5--1.20 课程小结与若干点补充

    html5--1.20 课程小结与若干点补充 学习要点: 1.第一章HTML5基础知识做一个小结2.对本章课程中部分内容做几点补充 课程小结 对本章的知识点做一个简单的回顾,并对其中个别知识点做若干补 ...

  6. 如何设置android studio让程序运行在真机中

    1.Run——>Edit Configurations... 2.运行

  7. 时间序列数据库概览——基于文件(RRD)、K/V数据库(influxDB)、关系型数据库

    一般人们谈论时间序列数据库的时候指代的就是这一类存储.按照底层技术不同可以划分为三类. 直接基于文件的简单存储:RRD Tool,Graphite Whisper.这类工具附属于监控告警工具,底层没有 ...

  8. Linux_服务器_06_VMware虚拟机下安装CentOS7.0图文教程

    二.参考资料 1.VMware虚拟机下安装CentOS7.0图文教程

  9. PC样式reset参考

    /* html5doctor.com Reset Stylesheet */ * { padding:; margin:; list-style: none; } html, body, div, s ...

  10. 1087 All Roads Lead to Rome (30)(30 分)

    Indeed there are many different tourist routes from our city to Rome. You are supposed to find your ...