使用 JQuery 模板引擎进行通用客户端模板化

当我阅读 Jquery 模板引擎时，我考虑在空闲时间尝试一下，我创建了一些可以简化我和其他开发人员针对不同数据源编写相同代码的生活的东西。

为此，我首先创建了一个 Web 服务，该服务可以将 Datatable 序列化为 JSON 对象。
C# 代码
[WebMethod]
public string Genericservice_records(string SpName, string[] param)
{
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var rows = new List<Dictionary<String, Object>>();
Dictionary<String, Object> row;
var temptable = new DataTable();
var objEntLib = new Microsoft.Practices.EnterpriseLibrary.Data.Sql.SqlDatabase(System.Configuration.ConfigurationManager.ConnectionStrings["<连接字符串的名称>"].ConnectionString);
temptable = objEntLib.ExecuteDataSet(SpName, param).Tables[0];
foreach (DataRow dr in temptable.Rows)
{
row = new Dictionary<String, Object>();
foreach (DataColumn col in temptable.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}

用于渲染表格的 JavaScript 代码

<script type="text/javascript">
$(document).ready(function () {
var jList = [];
jList[0] = {};
jList[0].DataType = "string";
jList[0].DataValue = "";
var call = new TSG.MODULES.TEMPLATE.PARAMETERS();
call.paramList = jList;
call.servicePath = 'AjaxService1.asmx/Genericservice_records';
call.spName = 'USP_GetCustomers';
call.timeout = 5000;
//*****************************************************//
//当我们需要将外部模板固定在容器中时，需要以下参数
call.templateFullName = 'Templates/customers.htm';
call.ajaxImageDivID = 'customImage';
call.parentContainer = 'DataContainer';
call.errorContainer = 'DataContainer';
call.ajaxImageDivID = 'customImage';
call.errorMessage = '服务器繁忙...请稍后再试！';
call.templateid = 'scrcustomerList';
//******************************************************************************
//*******************************************************//
//当显示格式为表格时，需要以下参数
call.elementID = 'customerList';
call.createNew = true;
call.createSP = 'USP_InsertCustomer';
call.createtemplate = 'Templates/InsertCustomer.htm';
call.createTemplateID = 'insertCustomer';
call.createimage = 'images/new.png';
call.editable = true;
call.editImagePath = 'images/Edit.JPG';
call.editTemplate = 'Templates/EditCustomer.htm';
call.editTemplateID = 'edtCustomer';
call.editSP = 'USP_EditCustomers';
call.showDetails = true;
call.detailsSP = 'USP_GetCustomers';
var dList = [];
dList[0] = {};
dList[0].DataType = "string";
dList[0].DataValue = "CustomerID";
call.detailParamList = dList;
call.detailsImgPath = 'images/details.gif';
call.detailTemplate = 'Templates/TranscriberDetails.htm';
call.detailTemplateID = 'dtltranscribercnt';
call.deletable = true;
call.deleteImgPath = 'images/delete.jpg';
call.deleteParamList = dList;
call.deleteSP = 'USP_DeleteCustomers';
call.customCall = '';
call.sorting = true;
call.paging = true;
call.filter = true;
call.defaultPageSize = 15;
call.applyTemplate();
});

</Script>

它还可以将数据填充到下拉框中

以下是可用的 Javacript

<script type="text/javascript">
var pList = [];
pList[0] = {};
pList[0].DataType = "boolean";
pList[0].DataValue = "false";
var call1 = new CLIENT.MODULES.TEMPLATE.PARAMETERS();
call1.paramList = pList;
call1.servicePath = 'AjaxService1.asmx/Genericservice_records_tmt';
call1.spName = 'USP_Some_List';
call1.elementID = 'slctdemo';
call1.ajaxImageDivID = 'Div1';
call1.displayFormat = 'select'; //select
call1.displayColumn = 'Initials';
call1.valueColumn = 'Name';
call1.selector = $('#slctdemo');
call1.applyTemplate();

</Script>

这也可以使文本框自动完成

var qList = [];
qList[0] = {};
qList[0].DataType = "boolean";
qList[0].DataValue = "false";
var call2 = new CLIENT.MODULES.TEMPLATE.PARAMETERS();
call2.paramList = qList;
call2.servicePath = 'AjaxService1.asmx/Genericservice_records_tmt';
call2.spName = 'USP_SomeList_List';
call2.elementID = 'txtStartDate';
call2.ajaxImageDivID = 'Div1';
call2.displayFormat = 'text'; //select
call2.displayColumn = 'Name';
call2.selector = $('#txtStartDate');
call2.applyTemplate();

它还可以渲染任何 HTML 模板，在这种情况下，我们不需要指定任何 displayFormat。 如果我们只想以用户定义的格式重复带有 DataTable 记录的模板，则 displayFormat 将为 repeater 格式。

可以从以下链接下载此代码

http://tekrhythm.com/downloads/

这是一个简单的想法，并不遵循所有的开发指南。我也想听取您的意见，并需要您的贡献，使其真正成为通用客户端模板（我计划在此处合并 KnockOut.js，并希望听取您的意见）。

希望这有帮助！

快乐编码