js插件---在线类似excel生成图表插件解决方案
一、总结
一句话总结：google比百度好用多了，多用google
google比百度好用多了，多用google
找准关键字+多尝试关键字：google js editable table jquery 双向绑定
这种可编辑的表格一定是双向绑定，那么可以vue和angular，
终于找到了
多换几个关键词搜索就好了
js editable table
没找到
换juqery editable table找到了
二、 几个Dynamic editable table
1、Vue JS| Dynamic editable table？
https://codepen.io/Pizzi/pen/GMOQXy
2、js-grid？
http://js-grid.com/demos/
3、GIJGO？
开源
4、SpreadJS？
High-speed Excel-like JavaScript spreadsheet components
就是网络版的excel 功能全 但是 要钱
5、mdbootstrap？
https://mdbootstrap.com/docs/jquery/tables/editable/#!
优势是行列都可以添加，删除也很方便
缺点是用户少，bug却不少
https://www.jqueryscript.net/tags.php?/editable%20table/
https://www.jqueryscript.net/table/Editable-Table-Plugin-jQuery-TableEdit.html
7、这种动态生成指定行列表格的方式？
https://divtable.com/generator/
8、找了一圈都不合适，只有自己写了？
https://www.jqueryscript.net/demo/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table/
找了一圈都不合适，只能自己找个基础的，自己改自己加
https://www.jqueryscript.net/demo/Stylish-Editable-Table-Plugin-with-jQuery-Bootstrap-2-3-Editable-Table/
最后选了这个
9、可编辑表格的实现原理是什么？
input 位置 单元格
可以编辑的是input标签，点哪里，就把input放到点击那里，input失去焦点的时候把input的值传递给那个那个表格的单元格就好，
或者：
td里面放一个span一个input，不编辑的时候显示span，编辑的时候显示input，其实也都非常好实现，
相比于上一种方法，input多了几个，不过完全不影响的
三、editableTableWidget---比较基础的可编辑表格模型（没有样式）
其实实现原理非常简单：可以编辑的是input标签，点哪里，就把input放到点击那里，input失去焦点的时候把input的值传递给那个那个表格的单元格就好，
核心的就是一个mindmup-editabletable.js
使用起来也简单
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5
6 <title>Tiny editable jQuery Bootstrap spreadsheet from MindMup</title>
7
8 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9 <meta name="keywords" content="opensource jquery bootstrap editable table spreadsheet" />
10 <meta name="description" content="This tiny jQuery bootstrap plugin turns any table into an editable spreadsheet" />
11
12
13
14
15 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
16 <script src="mindmup-editabletable.js"></script>
17 </head>
18 <body>
19 <div>
20
21 <div class="pull-right">
22 </div>
23 <h1>editableTableWidget<br/> <small>tiny editable jQuery Bootstrap spreadsheet</small></h1>
24 <hr/>
25 <div class="alert alert-error hide">
26 That would cost too much
27 </div>
28 <table id="mainTable" class="table table-striped">
29 <thead><tr><th>Name</th><th>rewr</th><th>Profit</th><th>Fun</th></tr></thead>
30 <tbody>
31 <tr><td>Car2121</td><td>Car</td><td>200</td><td>0</td></tr>
32 <tr><td>Bike</td><td>330</td><td>240</td><td>1</td></tr>
33 <tr><td>Plane</td><td>430</td><td>540</td><td>3</td></tr>
34 <tr><td>Yacht</td><td>100</td><td>200</td><td>0</td></tr>
35 <tr><td>Segway</td><td>330</td><td>240</td><td>1</td></tr>
36 </tbody>
37 </table>
38 <h2><small>just start typing to edit, or move around with arrow keys or mouse clicks!</small></h2>
39
40 </div>
41
42 <script>
43 $('#mainTable').editableTableWidget().find('td:first').focus();
44 $('#textAreaEditor').editableTableWidget({editor: $('<textarea>')});
45
46 </script>
47
48 </body>
49 </html>
| 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-5-7 17:55:29