JS高级第五天：

来源：互联网发布：沙漠靴品牌知乎编辑：程序博客网时间：2024/05/16 08:51

做一个表格的项目，需求是：动态加载数据库的表中的数据，显示在html上，并且当鼠标点击某一个单元格能启用编辑功能，而且可以修改和删除。

先来一个全手写，js中拼接表格的代码（简单）

以下是js文件中的代码：


/**
 * 当加载table1.html时，发出ajax请求，查询出数据库中某一张表的所有的数据，把这些数据回调到
 * js的客户端，动态的填充表格
 */
var table = {
    /**
     * 触发ajax请求，加载数据库中的一张表
     */
    loadData: function(){
    $.post("menuitemAction_showMenuitems.action",null,function(data){
//拼第一列
var $title_midTD=$("<td></td>");
    $title_midTD.text("mid");
    $title_midTD.attr("style","width:160px");
var $title_tidTD=$("<td></td>");
    $title_tidTD.text("tid");
    $title_tidTD.attr("style","width:160px");
var $title_nameTD=$("<td></td>");
    $title_nameTD.text("name");
    $title_nameTD.attr("style","width:160px");
var $title_optionTD=$("<td></td>");
    $title_optionTD.text("操作");
    $title_optionTD.attr("style","width:160px");
//拼第一行
var $title_tr=$("<tr></tr>");
$title_tr.append($title_midTD);
$title_tr.append($title_tidTD);
$title_tr.append($title_nameTD);
$title_tr.append($title_optionTD);
$("table").append($title_tr);
    //data就是数据库表中是数据，现在要循环这个数据，取得数据库中的表中的每一行，拼接到表格中
    for ( var i = 0; i < data.length; i++) {
  //这是创建一个td的容器，用来存放要放到第一列中的内容
  //循环拼列
    var $midTD=$("<td></td>");
    $midTD.text(data[i].mid);
    $midTD.attr("style","width:160px");
    
    var $pidTD=$("<td></td>");
    $pidTD.text(data[i].pid);
    $pidTD.attr("style","width:160px");
    
    var $nameTD=$("<td></td>");
    $nameTD.text(data[i].name);
    $nameTD.attr("style","width:160px");
    //添加超级链接按钮
    var $delA=$("<a></a>");
    $delA.text("删除");
    
    var $delTD=$("<td></td>");
$delTD.attr("style","width:160px");
    $delTD.append($delA);
    //循环拼行
var $tr=$("<tr></tr>");
$tr.append($midTD);
$tr.append($pidTD);
$tr.append($nameTD);
$tr.append($delTD);
$("table").append($tr);
}
    });
    }
};
$().ready(function(){
    table.loadData();
});

以下是html里面的代码：


<!DOCTYPE html>
<html>
  <head>
    <title>table.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=utf-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <script src="../js/jquery-1.4.2.js"></script>
  <!--<script src="../js/jquery-plugin-post.js"></script>-->
  <script src="mytable.js"></script>
  <body>
    This is my HTML page. <br>
<div id="mygrid">
<table border="1" class="dataGrid">
</table>
</div>
  </body>
</html>

下面来个重构（难度较大）


/**
 * 分析table1.js的缺点：
 *    1、在table1.js中的post请求中三个参数都是固定的，所以这样写不利于重用
 *        可以通过传递参数的形式解决该问题
 *    2、$midTD.text(data[i].mid);这样的代码和具体的数据库中的字段相对应，不利于重用
 *      在表的表头中有一个属性，该属性就是用来标示要显示的字段的
 *    <th field="mid" style="width: 160px;">mid</th>
<th field="pid" style="width: 160px;">pid</th>
<th field="name" style="width: 160px;">name</th>
<th field="option" style="width: 160px;">操作</th>
 *    3、在进行删除的时候，要往后台传递一个参数，而参数的名称不能确定
 *    4、数据库中的字段的名称和页面上表格的字段的名称相对应
 *    5、用unbind和bind声明事件只能在已经存在的dom元素上添加事件
 *    可以利用delegate声明事件
 *    6、在动态的创建表的过程中写了大量的重复性的代码创建tr和td
 *          可以写一个方法，让所有的tr和td的创建共用一个方法
 */

(function($) {
//dataGrid函数两个作用,第一把普通表格变成 自定义dataGrid组件, 第二:dataGrid(methodName,params),调用当前dataGrid组件上面的方法.
$.fn.dataGrid = function(options,param) {
if(typeof options == 'string'){
return $.fn.dataGrid.methods[options](this,param);
}
var me = this;
//获取dataGrid中的表头   含有属性field,一开始的时候，含有属性field的只有th,而th包含了所有的列项
var columns = me.find("thead *[field]");
//把列的信息缓存在table中
me.data("columns",columns);
//存储配置参数信息.
me.data("options",options||{});
//加载远程数据.
me.dataGrid("loadData");
//所有匹配的元素进行事件绑定,事件委派.
me.delegate("tbody td","click",function(){
$(this).trigger("clickcell",[me,this]);
});
if(options.editor && options.editor.isEditor){
me.bind("clickcell",function(event,grid,td){
var cell = $(td);
//获取编辑列所在的所在行
var row = cell.parent();
//获取当前行关联的数据,不以td中文本为基准.
var data = row.data("data");
var field = cell.attr("field");
var val = data[field];
grid.dataGrid("editCell",{
data:data,
row:row,
field:field,
cell:cell,
val:val
});
});
}
};
//通过columns[th,th,th],索引,数据,创建<tr><td>...</td><td>...</td></tr>
function renderRow(columns,index,data){
var row = $("<tr></tr>").data("data",data);
$.each(columns,function(){
//获取表格的列
var field = $(this).attr("field");
var td = $("<td field=\""+field+"\">"+(data[field]||"")+"</td>");
row.append(td);
});
return row;
}
$.fn.dataGrid.methods={
/**
 * 获取配置参数
 * $("#myDataGrid").dataGrid("config","url");
 */
config : function(jq,key){
var config = jq.data("options");
return config[key];
},
/**
 * 编辑某一个列,如果当前列正在编辑忽略.
 * @param jq
 * @param opts
 */
editCell : function(jq,opts){
var data,row,cell,val,field;
data = opts.data;
row = opts.row;
cell = opts.cell;
val = opts.val;
field = opts.field;
//当前列正在编辑中.
if(cell.data("isEditing")){
return;
}
var editor = jq.dataGrid("createEditor",val);
cell.empty().append(editor);
editor.focus().val(val);
//标示列正在编辑中.
cell.data("isEditing",true);
editor.one("blur",function(){
cell.data("isEditing",false);
data[field] = editor.val(); 
cell.html(data[field]);
editor.remove();
var eidtor = jq.dataGrid("config","editor");
$.post(eidtor.url,data);
});
},
/**
 * 通过JSON数据添加数据.
 * @param jq
 * @param data
 */
render:function(jq,data){
var columns = jq.data("columns");
var table = jq.find("table");
var tbody = table.children("tbody");
if(tbody.size()>0){
tbody.empty();
}else{
tbody = $("<tbody></tbody>");
tbody.appendTo(table);
}
$.each(data,function(index,data){
var row = renderRow(columns,index,data);
tbody.append(row);
});
},
createEditor:function(jq){
var editor = $("<input type='text'/>");
return editor;
},
/**
 * 所有的数据的加载，全部在这个方法中封装
 * @param jq
 */
loadData : function(jq) {
/*
 *  从缓存中的options中把url和params提取出来
 */
var url = jq.dataGrid("config","url");
var params = jq.dataGrid("config","params");
$.post(url,params,function(data) {
jq.dataGrid("render",data);
});
}
};
})($);

$().ready(function() {
$("#mygrid").dataGrid({
url : '../menuitemAction_showMenuitems.action',
params : null,
editor : {
isEditor : true,
url : "../personAction_updatePersons.action"
}
});
});

0 0