delphi WebBroker服务器做后端，前端jtable+Html5+javaScript，Web开发利器
<!doctype html>
<!-- <html lang="zh-CN">显示中中文无关 -->
<!-- :取决于安装的浏览器是否支持该语言 -->
<!-- 本页面由服务器端的主TWebModule下的WebFileDispatcher生成：<html lang="zh-CN"> -->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1"><!--：按比例显示基本响应-->
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ utf-8-->
<meta http-equiv="Content-Type" content="text/html,text/css,text/javascript,image/x-png,image/jpeg,multipart/form-data,application/xhtml+xml,application/json,application/xml;q=0.9,*/*;q=0.8;charset=UTF-8" >
<!-- 写法不规范上面已指定了charset不应在Content-Type关属性中<meta http-equiv="Content-Type" content="text/html,application/json; charset=utf-8" >-->
<title>A测试中文文字显示及jTbale表格</title>
<!-- google相关:国内不能访问,需要CDN服务或将代码下载到本机路径加载:-->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>-->
<!--可下载后用当前路径代码jquery/jqueryui/...：cdn.bootcss.com cdn.staticfile.org-->
<!--<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>-->
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.js"></script>
<!--<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script> -->
<!-- :可用的-->
<!--引用下载的jTable js脚本文件: -->
<script src="lib/jtable/jquery.jtable.min.js"></script>
<!--<script type="text/javascript" src="lib/jtable/localization/jquery.jtable.zh-CN.js"></script>-->
<!--:简单本地化组件本身字符集,可不用它，而用下面的Localization本地化字符集与消息变量ChinaMessages：-->
<!--当前路径下lib/jtable/themes/均为皮肤:皮肤可任意调用:即实际显示效果：-->
<link href="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<!--:影响jTable的弹窗居中及jquery-ui样式本身-->
<!--引用下载的jTable css样式文件: -->
<link href="lib/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css" />
<!--：jtable表格的默认样式：只是用jtable在其外套了表格，不进行任何渲染-->
<!--<link href="lib/jtable/themes/jqueryui/jtable_jqueryui.min.css" rel="stylesheet" type="text/css"/>-->
<!--：如果屏蔽link rel="stylesheet" 则用此jtable表格默认的jqueryui样式-->
<!--<link rel="stylesheet" type="text/css" href="lib/jtable/themes/lightcolor/blue/jtable.min.css"> -->
<!--<link rel="stylesheet" type="text/css" href="/lib/jtable/themes/lightcolor/blue/jtable.css">-->
<!--：路径：/themes/lightcolor/ -->
<!--：路径：/themes/metro/ --> <!--：metro:metropolis:大都市的大气的:加载数据速度较慢 -->
<!--：路径：/themes/basic/jtable_basic.min.css --> <!--：基本样式 -->
</head>
<body>
<div>
<ul>
<li><a href="#hero">首页</a></li>
<li><a href="#about">ABOUT</a></li>
<li> <a href="#contact">CONTACT</a></li>
</ul>
</div>
<div id="people"></div>
<script>
//Localization本地化字符集与消息变量ChinaMessages:
var ChinaMessages = {
serverCommunicationError: '与服务器通讯时产生错误.', //与服务器通讯时产生错误An error occured while communicating to the server.
loadingMessage: '加载中...', //加载中...Loading records...
noDataAvailable: '无有效数据!', //无有效数据No data available!
addNewRecord: '增加记录',
editRecord: '编辑记录',
areYouSure: '你确认要?', //Are you sure你确认要：
deleteConfirmation: '确认删除记录吗?',
save: '保存?', //保存? Save
saving: '保存中', //保存中 Saving
cancel: '取消', //取消?Cancel
deleteText: '删除记录',
deleting: '正在删除',
error: '错误', //错误 Error
close: '关闭', //关闭 Close
cannotLoadOptionsFor: '不能为{0}加载选项!',
pagingInfo: '显示{0}-{1} of {2}',//Showing {0}-{1} of {2}
pageSizeChangeLabel: '行数',//Row count
gotoPageLabel: '定位页',//Go to page
canNotDeletedRecords: '不能删除 {0} of {1} 这些记录!',//Can not delete {0} of {1} records!
deleteProggress: '正在删除 {0} of {1} 这些记录, 处理中...'//Deleting {0} of {1} records, processing...
};
// 我的WebBroker电话本:
$(document).ready(function(){
$.extend(true, $.hik.jtable.prototype.options.messages, ChinaMessages);
$('#people').jtable(
{
jqueryuiTheme:true,
//setShowGrid:true,
title: '我的WebBroker电话本',
defaultSorting: 'FIRST_NAME ASC',
sorting: true,
multiSorting: true,
paging: true,//:分页
pageList: 'normal', //possible values: 'minimal', 'normal'
pageSize: 10,//10
pageSizes: [10, 25, 50, 100, 250, 500],
pageSizeChangeArea: true,
gotoPageArea: 'combobox', //possible values: 'textbox', 'combobox', 'none'
selecting: true,
//Localization:本地化表格内组件的消息提示:
messages: {
ChinaMessages,
},
actions: { //:服务器端的主TWebModule下Actions:TWebActionItems下定义的操作路径信息getpeople、方法及方法名、TWebActionItem的对象名等:
listAction: '/getpeople',
createAction: '/saveperson',
updateAction: '/saveperson',
deleteAction: '/deleteperson'
},
fields: {
id: {
key: true,
list: false
},
first_name: {
title: '姓',//'\u59D3',//'First name',
width: '20%',
sorting: true
},
last_name: {
title: '名',//'Last name',
width: '20%',
sorting: true
},
work_phone_number: {
title: '工作电话',//'Work Phone #',
width: '20%',
sorting: false
},
mobile_phone_number: {
title: '移动电话',//'Mobile Phone #',
width: '20%',
sorting: false
},
email: {
title: '电邮',//'email',
width: '20%',
sorting: true
}
}});
$('#people').jtable('load');
});
</script>
</body>
</html>
