使用dataTable實現editor編輯數據
1，使用editor編輯數據
文檔：https://editor.datatables.net/examples/inline-editing/simple
在股票系統中需要錄入自己的股票數據，和一些字典數據表。 對這些數據表進行簡單的編輯查看。不用每次都做一個CRUD，進行簡單的字典表處理。 利用之前做的數據查詢通用的查詢顯示。
效果：
編輯數據：
2，增加html代碼
editor = new $.fn.dataTable.Editor( {
i18n: {
create: {
button: "新建",
title: "創建新數據",
submit: "保存"
},
edit: {
button: "修改",
title: "修改數據",
submit: "保存"
},
remove: {
button: "刪除",
title: "刪除數據",
submit: "刪除",
confirm: {
_: "確定刪除 %d 條數據？",
1: "確定刪除 1 條數據？"
}
},
error: {
system: "發生了一系統錯誤，（更多信息）"
},
datetime: {
previous: 前一月 ,
next: 下一月 ,
months: [ 1月 , 2月 , 3月 , 4月 , 5月 , 6月 , 7月 , 8月 , 9月 , 10月 , 11月 , 12月 ],
weekdays: [ 星期日", 星期一 , 星期二 , 星期三 , 星期四 , 星期五 , 星期六" ]
}
},
ajax: "/data/editor/save?table_name={{ stockWeb.table_name }}",
table: "#dynamic-table",
fields: [
{% for index,element in enumerate(stockWeb.columns) %}
{
label: "{{ stockWeb.column_names[index] }}:",
name: "{{ element }}"
{% if element == "date" %} ,type: "datetime" {% end %}
},{% end %}
]
} );
var nameParam = $.getUrlVar( table_name );
//console.log(nameParam);
var myTable = $( #dynamic-table ).DataTable( {
"dom": "Bfrtip",
"bFilter": true,
"ordering": true,
"processing": true,
"serverSide": true,
"lengthMenu": [[20, 30, 50, 100,1000, -1], [20, 30, 50, 100,1000, "All"]],
"language": {
"url": "/static/js/datatables.Chinese.json"
},
"ajax": "/stock/api_data?type=editor&name="+nameParam,
"columns": [
{
"data": "",
"defaultContent": "",
"className": select-checkbox ,
"orderable": true
},
{% for column in stockWeb.columns %}
{ "data": "{{ column }}" },
{% end %}
],
select: {
style: os ,
selector: td:first-child
},
buttons: [
{ extend: "create", editor: editor, text: 新增 },
{ extend: "edit", editor: editor, text: 編輯 },
{ extend: "remove", editor: editor, text: 刪除" }
]
} );
Editor 中增加了i18n 的支持，默認的是英文的。 https://editor.datatables.net/examples/simple/i18n.html 同時增加了buttons按鈕。有3個按鈕，【新增】，【編輯】，【刪除】。 在數據的每一列裡面增加了一個checkbox，選擇數據之後才能進行編輯和刪除操作。 而不是像其他操作那樣在最後有一個編輯按鈕。使用起來不是很直接。
3，後台CRUD
查詢操作前面已經實現了，現在開始做的新增，修改，刪除操作。
# 獲得頁面數據。
class SaveEditorHandler(webBase.BaseHandler):
@gen.coroutine
def post(self):
action = self.get_argument("action", default=None, strip=False)
logging.info(action)
table_name = self.get_argument("table_name", default=None, strip=False)
stockWeb = stock_web_dic.STOCK_WEB_DATA_MAP[table_name]
# 臨時map數組。
param_map = {}
# 支持多排序。使用shift+滑鼠左鍵。
# 正則查找 data[1112][code] 裡面的code欄位
item_key = re.search(r"][(.*?)]", item)
if item_key:
tmp_1 = item_key.group()
if tmp_1:
tmp_1 = tmp_1.replace("][", "").replace("]", "")
param_map[tmp_1] = val[0].decode("utf-8")
#logging.info(param_map)
if action == "create":
logging.info("###########################create")
# 拼接where 和 update 語句。
tmp_columns = "`, `".join(stockWeb.columns)
tmp_values = []
for tmp_key in stockWeb.columns:
tmp_values.append(param_map[tmp_key])
# 更新sql。
tmp_values2 = " , ".join(tmp_values)
insert_sql = " INSERT INTO %s (`%s`) VALUES( %s ); " % (stockWeb.table_name, tmp_columns, tmp_values2)
logging.info(insert_sql)
try:
except Exception as e:
err = {"error": str(e)}
logging.info(err)
self.write(err)
return
elif action == "edit":
logging.info("###########################edit")
# 拼接where 和 update 語句。
tmp_update = genSql(stockWeb.columns, param_map, ",")
tmp_where = genSql(stockWeb.primary_key, param_map, "and")
# 更新sql。
update_sql = " UPDATE %s SET %s WHERE %s " % (stockWeb.table_name, tmp_update, tmp_where)
logging.info(update_sql)
try:
except Exception as e:
err = {"error": str(e)}
logging.info(err)
self.write(err)
return
elif action == "remove":
logging.info("###########################remove")
# 拼接where 語句。
tmp_where = genSql(stockWeb.primary_key, param_map, "and")
# 更新sql。
delete_sql = " DELETE FROM %s WHERE %s " % (stockWeb.table_name, tmp_where)
logging.info(delete_sql)
try:
except Exception as e:
err = {"error": str(e)}
logging.info(err)
self.write(err)
return
self.write("{"data":[{}]}")
數據格式是 {"error": "xxxx error"}，datatable 會將錯誤的信息顯示到最下面。 同時還編寫了一個工具方法，拼接數據：
# 拼接sql，將value的key 和 value 放到一起。
def genSql(primary_key, param_map, join_string):
tmp_sql = ""
idx = 0
for tmp_key in primary_key:
tmp_val = param_map[tmp_key]
if idx == 0:
tmp_sql = " `%s` = %s " % (tmp_key, tmp_val)
else:
tmp_sql += join_string + (" `%s` = %s " % (tmp_key, tmp_val))
idx += 1
return tmp_sql
可以講 column 欄位組合起來。按照不同字元串進行join。
配置stock_web 欄位：
class StockWebData:
def __init__(self, mode, type, name, table_name, columns, column_names, primary_key, order_by):
self.mode = mode # 模式，query，editor 查詢和編輯模式
self.type = type
self.name = name
self.table_name = table_name
self.columns = columns
self.column_names = column_names
self.primary_key = primary_key
self.order_by = order_by
if mode == "query":
self.url = "/stock/data?table_name=" + self.table_name
elif mode == "editor":
self.url = "/data/editor?table_name=" + self.table_name
....
STOCK_WEB_DATA_LIST.append(
StockWebData(
mode="editor",
type="股票配置管理",
name="持倉管理",
table_name="user_stock",
columns=["code", "date", "price", "shares", "commission_rate", "tax_rate", "comment"],
column_names=["股票代碼", "日期", "價格", "數量", "傭金", "稅率", "備註"],
primary_key=["code", "date"],
order_by=" code desc "
)
)
4，總結
對datatable的研究都差不多了。有增加了數據的crud。 可以對字典數據進行CRUD，只需要配置下就可以了，節省了大部分代碼。 非常的方便。
TAG:極客腦司機 |