使用AJAX方式加载数据列表以及实现数据分页显示（需要1.9.0新版本）

使用方法

在TFAPI页面里将数据列表加载方法改为AJAX，只需要一步即可完成。

1）在表格对象的show_argv方法里声明要使用AJAX模式

	protected function get_table_show_argv(table_action3_argv &$argv){
		$argv->actions = $this->actionObj->get_actions();
		$argv->tm_checkbox_field = "cId";
		$argv->field_widthes = array(60, -1, -1, 120, 60);
		$argv->data_empty_extra = "<tr><td colspan=\"7\">当前分类下未找到子分类信息！</td></tr>";
		$argv->ajax_table = true;
	}

只需要指明 $argv->ajax_table = true 即可

然后，我们按F5重新加载页面，打开浏览器的源代码查看输出的html代码，会发现输出表格的html代码没有了

同时，我们按F12打开调试模式，点击“网络”查看器，会发现里面多了一次AJAX请求。点击查看会看到一个包含数据列表内容的json数据

AJAX模式下的增、删、改、查实现

增加

为了达到不刷新页面的目的，我们需要通过弹出对话框的方式展示增加操作的表单form，同时增加操作表单form也必须使用ajax模式。

示例：

// 在事件绑定对象xxx_action里指定add操作为对话框模式

		$this->add_usr_action("add","添加");
		$this->dlg_usr_action("add",true);

// 在form_add方法里声明使用ajax模式的表单

		$arg['formAjaxSubmit'] = true;
		//////$arg['formAjaxSubmitDebug'] = true;

// 在error_add方法里使用ajax模式的出错提示

		$this->pageObj->ajaxFormError("add", $err);

// 在process_add方法里使用ajax模式的关闭对话框方法
// 注意：这里的makeTableRefreshDataScriptDlg方法是用来拼接关闭对话框并且刷新数据列表的javascript脚本的，以下句式请直接复制即可，不要自己修改

		$this->pageObj->ajaxCloseDlgBS($this->pageObj->makeTableRefreshDataScriptDlg($this->tableConfig->progName));

删除

为了达到不刷新页面的目的，我们需要使用支持ajax回调的模式来处理无表单form的事件操作。

示例：

// 在事件绑定对象xxx_action里指定del操作为ajax回调模式

		$this->add_usr_action("del","删除",null,null,true,null,true);

// 在form_del方法里声明使用ajax模式的表单

		$arg['formAjaxSubmit'] = true;
		//////$arg['formAjaxSubmitDebug'] = true;

// 在error_del方法里使用ajax模式的出错提示

		$this->pageObj->ajaxFormError("del", $err);

// 在process_del方法里使用ajax模式的关闭对话框方法
// 注意：这里的makeTableRefreshDataScriptDlg方法是用来拼接关闭对话框并且刷新数据列表的javascript脚本的，以下句式请直接复制即可，不要自己修改

		$this->pageObj->ajaxCloseDlgBS($this->pageObj->makeTableRefreshDataScriptDlg($this->tableConfig->progName));

修改

为了达到不刷新页面的目的，我们需要通过弹出对话框的方式展示修改操作的表单form，同时修改操作表单form也必须使用ajax模式。

示例：

// 在事件绑定对象xxx_action里指定mod操作为对话框模式

		$this->add_usr_action("mod","修改");
		$this->dlg_usr_action("mod",true);

// 在form_mod方法里声明使用ajax模式的表单

		$arg['formAjaxSubmit'] = true;
		//////$arg['formAjaxSubmitDebug'] = true;

// 在error_mod方法里使用ajax模式的出错提示

		$this->pageObj->ajaxFormError("add", $err);

// 在process_mod方法里使用ajax模式的关闭对话框方法
// 注意：这里的makeTableRefreshDataScriptDlg方法是用来拼接关闭对话框并且刷新数据列表的javascript脚本的，以下句式请直接复制即可，不要自己修改

		$this->pageObj->ajaxCloseDlgBS($this->pageObj->makeTableRefreshDataScriptDlg($this->tableConfig->progName));

查询

带补充。。。

当然，这只是简单的把php直接绘制改成了ajax动态绘制，如果要做出更加炫酷的效果，我们还是要通过JavaScript来完成的。

自由绘制模式

所谓的自由绘制模式，就是我们不再使用table输出我们的数据列表，而是将这个绘制数据列表的功能交出来，让程序员自己随意组织数据列表的样式。

我们可以把table组织的数据列表换成以div组织的样式，这样可以最大限度的提供页面表现力。

要使用自有绘制模式，需要完成以下几步：

1）指定数据列表绘制的回调函数

	protected function get_table_show_argv(table_action3_argv &$argv){
		$argv->actions = $this->actionObj->get_actions();
		$argv->tm_checkbox_field = "cId";
		if(!$this->pageObj->isMobilePlatform) $argv->field_widthes = array(60, -1, -1, 120, 60);
		else $argv->field_widthes = array(-1);
		$argv->data_empty_extra = "<tr><td colspan=\"7\">当前分类下未找到子分类信息！</td></tr>";
		$argv->ajax_table = true;
		$argv->ajax_table_opts = array(
				'eFreeMapData'=>"mapDataByAjax",
			);
	}

在数据列表的show_argv方法里指定回调函数名称

2）定义绘制回调javascript函数

<style type="text/css">
.articleTreeMap{
	margin:12px 0px;
	overflow:hidden;
}
.articleTreeMap .treeItem{
	display:block;
	float:left;
	width:30%;
	font-size:13px;
	padding:12px;
}
.articleTreeMap .treeItem a{
	font-size:13px;
}
.articleTreeMap .treeItem .title{
	padding-bottom:12px;
	line-height:150%;
}
.articleTreeMap .disabled{
	background:#eee;
}
.articleTreeMap .pageInfo{
	clear:both;
	padding:12px 0px;
}
</style>
<script type="text/javascript">
function mapDataByAjax(obj, data, type){
	if(type == 'json'){
		obj.html('');
		if(data.page.total > 0){
			for(var i in data.data.rows){
				var myRow = data.data.rows[i];
				var myClass = '';
				if(myRow.cStat != '启用') myClass = 'disabled';
				var myHtml = '';
				myHtml += '<div class="treeItem '+myClass+'">';
				myHtml += '<div class="title">'+myRow.cName+'</div>';
				myHtml += '<div class="opers">'+data.data.extra.opersColumn[i]+'</div>';
				myHtml += '</div>';
				obj.append(myHtml);
			}
			obj.find('.opers').find('a').addClass('btn btn-primary');
		}
		obj.append('<div class="pageInfo">'+data.page.infos.articleCategoriesPages+'</div>');
		obj.addClass('articleTreeMap');
	}
}
</script>

我们需要设计新的css样式表，来控制新的数据列表的样式。

我们需要在绘制回调函数里重组数据列表的html结构，回调函数参数说明如下：

obj - 新的数据列表最外层的容器，他是一个div标签

data - 通过ajax请求得到的数据列表的数据对象

type - 通过ajax请求得到的数据列表的数据的类型，可以是json、xmldtdata两种，默认为json类型

数据对象的格式可以通过console.log等方式查看，这里就不再描述了。

示例代码的效果