zzy-ui框架 双击编辑表格table数据+保存发送修改后数据--柚子真好吃
一、框架引入二、构建表格三、编辑数据与获取数据功能四、实现效果
一、框架引入
下载地址：点击下载 地址：https://download.csdn.net/download/baidu_39265156/12565264
目录结构，如图所示，包含一个js文件夹与css文件夹。
在js中引入，所需的js与css，代码如下。
<link rel
="stylesheet" href
="css/zzy-jquery-1.0.0.all.css" />
<script src
="js/jquery-3.5.1.js"></script
>
<script src
="js/zzy-jquery-1.0.0.all.js"></script
>
二、构建表格
导入所需js与css后，首先需要构建表格。该框架只需编写3处即可，如下。
1)表格id (自定义)
2)表格样式 (固定 “zzy-table”)
3)th (表格标题)
代码如下。
<table id
="tableTwo" class="zzy-table">
<thead
>
<th zzy
-width
='120' name
="username">姓名
</th
>
<th zzy
-width
='120' name
="sex">性别
</th
>
<th zzy
-width
='120' name
="age">年龄
</th
>
</thead
>
</table
>
随后我们动态添加数据，只需在js中调用 zzy对象中的setTableData(id，data)方法即可。
setTableData(id，data)
id--表格id
data--要赋值的数据
let data
= [
{
"username":"Tom",
"sex":"cat",
"age":"2"
},
{
"username":"jerry",
"sex":"mouse",
"age":"2"
},
{
"username":"Spike",
"sex":"dog",
"age":"3"
}
];
zzy
.setTableData('tableTwo',data
);
刷新页面，效果如下。
三、编辑数据与获取数据功能
实现编辑数据功能十分简单，仅需添加“zzy-table-dblclick-edit-tr” class即可。实现获取数据功能，仅在js中调用zzy对象中getTableData(id)即可完整代码如下：
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<link rel
="stylesheet" href
="css/zzy-jquery-1.0.5.all.css" />
<script src
="js/jquery-3.5.1.js"></script
>
<script src
="js/zzy-jquery-1.0.5.all.js"></script
>
<title
>testTable
</title
>
</head
>
<body
>
<table id
="tableTwo" class="zzy-table zzy-table-dblclick-edit-tr">
<thead
>
<th zzy
-width
='120' name
="username">姓名
</th
>
<th zzy
-width
='120' name
="sex">性别
</th
>
<th zzy
-width
='120' name
="age">年龄
</th
>
</thead
>
</table
>
<button onclick
="sendData()">发送
</button
>
</body
>
<script
>
$(document
).ready(function(){
let data
= [
{
"username":"Tom",
"sex":"cat",
"age":"2"
},
{
"username":"jerry",
"sex":"mouse",
"age":"2"
},
{
"username":"Spike",
"sex":"dog",
"age":"3"
}
];
zzy
.setTableData('tableTwo',data
);
})
function sendData(){
let data2
= zzy
.getTableData('tableTwo');
console
.log(data2
);
}
</script
>
</html
>
四、实现效果
双击某行输入数据点击表格外任意位置，保存数据点击"发送"查看数据
