delphi WebBroker服务器做后端，前端jtable+Html5+javaScript，Web开发利器

delphi WebBroker服务器做后端，前端jtable+Html5+javaScript，Web开发利器<!doctype html><!-- 本页面由服务器端的主TWebModule下的WebFi...

pulledup

2040人浏览 · 2020-03-07 20:10:58

pulledup · 2020-03-07 20:10:58 发布

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>