JTable application and JTable Application

JTable application and JTable Application

A table is used in a recent project. The table looks like this:

 

You can modify the quantity and discount, and the final price will change accordingly.

The plug-in is handwritten and named as JTable. You can give jquery-loving friends a reference:

 

The Code is as follows:

/*** Created by oshine on 14-7-23. */(function ($) {var JTable = function (setting) {var defaultSetting = {header: ["service content", "quantity", "unit price (RMB )", "total price (yuan)", "quantifiers", "Original Price (yuan)", "discount", "final price (yuan)"], items: [{name: "Default content 1", num: 1, defaultPrice: 300}, {name: "Default content 2", num: 1, defaultPrice: 300}, {name: "Default content 3", num: 1, defaultPrice: 300}, {name: "Default content 4", num: 1, defaultPrice: 300}], unit: "half a year ", discount: 100, serve_id: 0, id: 0}; setting = $. extend (defaultSetting, setting); this. header = setting. header; this. container = setting. container; this. items = setting. items; this. discount = setting. discount * 100; this. unit = setting. unit; this. serve_id = setting. serve_id; this. name = setting. name; this. default_price = setting. default_price; this. id = setting. id; this. isDesign = setting. isDesign; this. init ();} JTable. prototype = {init: function () {var self = this; self. refresh () ;}, refresh: function () {var self = this; console. dir (self. items); Certificate (self.container).html (self. buildTable () + self. buildData (); $ (self. container ). find ("input [name = child-num]"). unbind (); $ (self. container ). find ("input [name = child-num]"). change (function () {var k = $ (this ). parent (). parent (). attr ("data-id"); self. items [k]. num = $ (this ). val (); self. refresh () ;}); $ (self. container ). find ("input [name = package-discount]"). change (function () {self. discount = $ (this ). val (); self. refresh () ;}) ;}, buildTable: function () {return "<table>" + this. buildHeader () + this. buildBody () + "</table>" ;}, jsonData: function () {return JSON. stringify ({id: this. id, serve_id: this. serve_id, isDesign: this. isDesign, name: this. name, default_price: this. default_price, discount: this. discount, unit: this. unit, cost_price: this. getCostPrice (), final_price: this. getFinalPrice (), items: this. items}) ;}, buildData: function () {return "<input type = 'did' contract = 'true' value = '" + this. jsonData () + "'name = 'data'/>" ;}, buildHeader: function () {var html = "<thead> <tr>"; $. each (this. header, function (k, v) {html + = "<th>" + v + "</th> ";}) return html + "</tr> </thead>" ;}, getCostPrice: function () {var costPrice = 0; $. each (this. items, function (k, v) {costPrice + = (v. num * v. defaultPrice) ;}); return costPrice ;}, getFinalPrice: function () {return this. getCostPrice () * (this. discount/100) ;}, buildBody: function () {var self = this; var html = "<tbody>"; var length = self. items. length; $. each (this. items, function (k, v) {var tr = "<tr data-id =" + k + ">"; if (k = 0) {tr + = '<td class = "item-name">' + v. name + '</td>' + '<td> <input class = "text-field" type = "text" value = "' + v. num + '"name =" child-num "> </td>' + '<td>' + v. defaultPrice + '</td>' + '<td>' + (v. num * v. defaultPrice) + '</td>' + '<td rowspan = "' + length + '">' + self. unit + '</td>' + '<td rowspan = "' + length + '">' + self. getCostPrice () + '</td>' + '<td rowspan = "' + length + '"> <input class = "text-field" type = "text" value = "' + self. discount + '"name =" package-discount "/>%</td>' + '<td rowspan ="' + length + '">' + self. getFinalPrice () + '</td>';} else {tr + = '<td class = "item-name">' + v. name + '</td>' + '<td> <input class = "text-field" type = "text" value = "' + v. num + '"name =" child-num "> </td>' + '<td>' + v. defaultPrice + '</td>' + '<td>' + (v. num * v. defaultPrice) + '</td>';} tr + = "</tr>"; html + = tr ;}); return html + "</tbody>" ;}}$. fn. extend ({JTable: function () {var data = eval ('+ $ (this ). attr ("data") + '); var setting = $. extend ({container: $ (this)}, data); return new JTable (setting) ;}) ($ );

 

Usage:

HTML:

<Div data = "{'id': '000000', 'quoted _ id': '000000', 'uid': '000000', 'serve _ id ': '2', 'name': 'out-of-site promotion package for wireless terminals ', 'default _ price': '2017. 00', 'discount': '0. 9000 ', 'final _ price': '2017. 00', 'centage': null, 'description': '', 'unit ': 'quarterly', 'Children ': null, 'is _ Design': null, 'items ': [{'id': '000000', 'packageid': '000000', 'name': 'out-of-site wireless adput', 'num ': '3', 'defaultprice': '2017. 00', 'unit ': 'quarterly', 'finalprice': '2017. 00', 'isdesign': null}, {'id': '000000', 'packageid': '000000', 'name': 'ad hoc promotion dimension optimization ', 'num': '1', 'defaultprice': '2017. 00', 'unit ': 'quarterly', 'finalprice': '2017. 00', 'isdesign': null}, {'id': '000000', 'packageid': '000000', 'name ': 'offline Ad Promotion weekly (Data Analysis + optimization suggestions) ', 'num': '1', 'defaultprice': '2017. 00', 'unit ': 'quarterly', 'finalprice': '2017. 00', 'isdesigt': null}]} "class =" constract-JTable "> </div>

Javascript:

$(document).ready(function(){         $(".constract-JTable").JTable();});

 

The code is generally written and can be optimized.

Use of jtable in java

You can use the JTable constructor to add the following methods:
JTable (Object [] [] rowData, Object [] columnNames)
Construct a JTable to display the values in the two-dimensional array rowData. Its column name is columnNames.
In addition, you can view the java API to obtain information!

Joint application of jTree and jTable (preferably a layer-3 Architecture)

<Dl class = "code"> <dt> Java code </dt> <dd> <pre>
<! --

Code highlighting produced by Actipro CodeHighlighter (freeware)
Www CodeHighlighter.com/

--> Try
{
String SQL = "select * from table ";

Rs = connect. getResultSet (SQL );

While (rs. next ())
{
Vector vector = new Vector ();
Vector. add (rs. getString (1). toString ());
Vector. add (rs. getString (2). toString ());
(DefaultTableModel) jTable1.getModel (). addRow (vector );
}
Rs. close ();

}
Catch (Exception se)
{

}
</Pre> </dd> </dl>
For more information, see connect and query.
Well, good, learning
I used the DefaultTableModel and JTree parts some days ago.
The structure is basically y, but what does the author mean by the three-tier architecture?

For more detailed solutions, refer:
Passport.baidu.com/..455123