跳至主要內容

脚本实例

快表软件2025年5月12日大约 9 分钟使用指南移动版

这里提供了一些日常设计中的实例供参考。

明细表按行求和填入合计列

最后一列合计
最后一列合计
$(function () {
	/*此处编写自定义代码，请确认此js文件名与您想修改的模板编号一致*/

});

//formulaComplete为公式执行完成后的事件
function formulaComplete() {
	mxsum();
}

function mxsum() {	
	// 获取数据表格的所有行
	var rows = $('#dg-detail').datagrid('getRows');
	// 遍历每一行
	for (var i = 0; i < rows.length; i++) {
		var row = rows[i];
		// 将每一行的列的值赋值给变量
		var a = parseFloat(row['F_770']) || 0;
		var b = parseFloat(row['F_771']) || 0;
		var c = parseFloat(row['F_772']) || 0;
		var d = parseFloat(row['F_773']) || 0;
		var e = parseFloat(row['F_1267']) || 0;
		// 计算行数据求和
		var rowsum = a + b + c + d + e;

		// 更新行数据
		$('#dg-detail').datagrid('updateRow', {
			index: i,
			row: {
				F_5868: rowsum
			}
		});
	}
}

提示

上面的脚本是表间公式执行完成后进行的统计。

页面主表底部添加一个按钮并执行函数

页面底部添加按钮并打开一个页面
页面底部添加按钮并打开一个页面
$(function(){
	
	//设置按钮样式
	var addbutton = '<div type="button" style="background-color: #00AFE4;border-radius: 5px;height: 52px;line-height: 52px;box-shadow: 3px 3px 5px grey;text-align: center;font-size: large;font-family: system-ui;color: white;margin: 10px 5px 0px 5px;" onclick="openurl()">打开</div>'
	//添加按钮
	$(".create_subdiv").append(addbutton);
});


function openurl(){
	//取主表字段的存储的网址
	var myUrl = $('input[name="F_23113"]').val();
	//在新窗口打开页面
    window.open(myUrl, "_blank");
}

移除底部保存按钮

$(function(){
	
	$(".create_subdiv").remove();	//移除保存按钮

});

移除其他公式项

$(function(){
	
	$(".buttonformone.wholebgcolor").remove();	//移除其他公式项

});

移除右上角保存图标

$(function(){
	
	$("a.icon-right").remove();	//移除右上角保存图标
	
});

单击明细表行取列值

$(function(){
    $('#dg-detail').datagrid({
    //单击事件   
    onClickRow:function(Index,row){
        alert("单击" + row.F_12);
        }
    })
})

双击明细表行取列值

$(function(){
    $('#dg-detail').datagrid({
    //双击事件
    onDblClickRow:function(Index,row){
        alert("双击" + row.F_12);
        }
    })
})

两个事件写一起

$(function(){
    $('#dg-detail').datagrid({
    //单击事件   
    onClickRow:function(Index,row){
        //alert("单击" + row.F_12);
        console.log("单击" + row.F_12);
        },
    //双击事件
    onDblClickRow:function(Index,row){
        //alert("双击" + row.F_12);
        console.log("双击" + row.F_8);
        }
    })
})

自定义日期区间日期+时间

提示

日期、时间选择时为了提高效率默认情况下只有当前年份前后共十年，如果需要选择出生年月等，时间远远不足，此时可以根据以下方法进行自定义。

//日期+时间时使用
dtpicker1 = new mui.DtPicker({
        type: "datetime",
        beginDate: new Date(1910, 01, 01),//设置开始日期 
        endDate: new Date(2019, 12, 31)//设置结束日期 
})

自定义日期区间日期

//仅日期
dtpicker2 = new mui.DtPicker({
        type: "date",
        beginDate: new Date(1910, 01, 01),//设置开始日期 
        endDate: new Date(2019, 12, 31)//设置结束日期 
})

读写LocalStorage

$(function () {
	
	$("#dg-table input").parent().css({"font-family":"Microsoft YaHei","font-size": "13px","color":"rgb(64,64,64)","text-align":"left","border":"1px solid #9e9e9e","border-radius":"5px"})
	$("input[name='F_65929']").val(localStorage.getItem('kbname'));

});

// localStorage functions
function setLocalStorage() {
	aa = Math.random().toString(36).substr(2,6);
	$("input[name='F_65927']").val(aa);
	localStorage.setItem('kbname', aa);
}

function getLocalStorage() {
	const value = localStorage.getItem('kbname');
	$("input[name='F_65928']").val(value);
}

function removeLocalStorage() {
	localStorage.removeItem('kbname');
	$("input[name='F_65927']").val('');
	$("input[name='F_65928']").val('');
}

function addLocalStorage() {
	localStorage.setItem('kbname', $("input[name='F_65929']").val());
}
读写LocalStorage
读写LocalStorage

设置Cookie

//设置Cookie
setCookie(name,value)

读取Cookie
getCookie(name)

//删除Cookie
delCookie(name)

加密解密

// /UTF-8 编码十六进制
var str = '快表';
var jiaMi = encodeURIComponent(str);
alert(jiaMi)
var jiaMi = decodeURIComponent(str);
alert(jiaMi)
//Unicode 编码
//加密
function encryptionCode(str){ 
   var len=str.length; 
   var rs=""; 
   for(var i=0;i<len;i++){ 
          var k=str.substring(i,i+1); 
          rs+= (i==0?"":",")+str.charCodeAt(i); 
   } 
   return rs; 
} 
//解密
function unEncryptionCode(str){ 
   var k=str.split(","); 
   var rs=""; 
   for(var i=0;i<k.length;i++){ 
      rs+=String.fromCharCode(k[i]); 
   } 
   return rs; 
}

Ajax与API交互

API接口示例说明

创建控制器开发API接口。
在服务器上打开快表程序目录Kuaibiao\ThinkPHP\kbwebapp\index\controller，其中的Api.php就是接口文件，里面包含接口示例代码。该示例代码是查询系统日志并返回10行数据。将函数getlog中注释的部分取消注释，然后再浏览器中输入访问地址科获得返回的10日志数据。

	public function getlog($key=''){
		if(self::vt($key) == false){
			return 'nokey';
		}
 		$res = Db::table('SYS_LOG')
			->field('USERNAME,LOGTYPE,LOGDETAIL')
			->where('YEAR(LOGDATE) = YEAR(GETDATE())')
			->limit(10)
			->select();
		return json($res); 
	}

在服务器浏览器地址栏输入的地址为：http://127.0.0.1:9375/index.php/index/api/getlog/key/9370

提示

企业版控制器的目录在WebApp中。
默认的接口文件为Api.php,在较早的版本中接口文件为Custom.php。
上述访问地址中端口号依赖于您快表系统所开放的端口。如果要在客户机中访问需要将127.0.0.1改为您的服务器IP或域名地址。

Ajax方法获取数据

编辑脚本通过Ajax方法获得API数据。将下面的脚本写入模板脚本中，测试填报，打开浏览器开发人员工具，在控制台/用户消息中就可以看到输出日志数据。

$(function () {
    /*此处编写自定义代码，请确认此js文件名与您想修改的模板编号一致 */
    $.ajax({
        url: '/index.php/index/api/getlog/key/9370',
        async: true,
        type: 'GET',
        data: {}, success: function (e) {
            //向浏览器控制台输出结果
            console.log(e);
        }
    });
});

Ajax方法获取数据并填入主表字段

$(function () {
    /*此处编写自定义代码，请确认此js文件名与您想修改的模板编号一致 */
    $.ajax({
        url: '/index.php/index/api/getlog/key/9370',
        async: true,
        type: 'GET',
        data: {}, success: function (e) {
            //将获取的数据填入主表输入框。
            $('input[name="F_1"]').val(e[0].USERNAME);
            $('input[name="F_2"]').val(e[0].LOGTYPE);
            $('input[name="F_3"]').val(e[0].LOGDETAIL);
        }
    });
});

Ajax方法获取数据并填入明细表

$(function () {
    /*此处编写自定义代码，请确认此js文件名与您想修改的模板编号一致 */
    $.ajax({
        url: '/index.php/index/api/getlog/key/9370',
        async: true,
        type: 'GET',
        data: {}, success: function (e) {
            //将获取的数据填入明细表
            $('#dg-detail').datagrid('loadData', e);
        }
    });
});

提示

上面方法的前提是在API接口中field中的字段需要AS设置一个别名，别名为明细表的字段名。从而可以从返回的数据中直接绑定填入。假设明细表有3个字段F_4、F_5、F_6，则API接口函数如下：

public function getlog($key=''){
		if(self::vt($key) == false){
			return 'nokey';
		}
 		$res = Db::table('SYS_LOG')
			->field('USERNAME AS F_4,LOGTYPE AS F_5,LOGDETAIL AS F_6')
			->where('YEAR(LOGDATE) = YEAR(GETDATE())')
			->limit(10)
			->select();
		return json($res); 
	}

Ajax提交数据写入数据库表

操作模板时通过Ajax将数据插入到数据库指定的表。
在控制器中新建API接口。打开api.php,在api类中添加接口函数。也即是增加一段与示例中getlog类似的函数。

public function addlog(Request $request){
        // 获取所有 POST 数据
		$postData = $request->post(); 
        // cuname为前端传递过来的参数名，替换为实际的参数名
		$cuname = isset($postData['cuname']) ? $postData['cuname'] : '无数据'; 


		// 添加插入数据
		$data = [
			'LID' => Db::raw('NEWID()'), 
			'USERNAME' => $cuname,
			'LOGTYPE' => 'WebApp',
			'LOGDETAIL' => 'API数据日志',
			'COMPUTERNAME' => '127.0.0.1',
			'LOGDATE' => Db::raw('GETDATE()'),
			'PLATFORM' => ''
		];
		// 向数据库表中插入数据
		$result = Db::table('SYS_LOG')->insert($data);

		if ($result) {
			return json(['status' => 'success', 'message' => '日志写入成功']);
		} else {
			return json(['status' => 'error', 'message' => '日志写入失败']);
		}

	}

前端模板页面脚本中提交数据。下面是移除模板中默认的保存按钮，重新添加了一个按钮，当点击按钮时提交插入数据。

$(function () {
    /*此处编写自定义代码，请确认此js文件名与您想修改的模板编号一致 */
    $(".create_sub.wholebgcolor").remove();
    var addbutton = '<button type="button" class="create_sub wholebgcolor" style="box-shadow:3px 3px 5px grey;display:block;" onclick="mysub()">提交数据</button>'
    $(".create_subdiv").append(addbutton);
});

function mysub() {
    // 需要发送的参数
    var postData = {
        cuname: '超级管理员' // 其他要传递的参数，可以根据需要添加
    };
    $.ajax({
        url: '/index.php/index/api/addlog',
        type: 'POST',
        data: postData,
        dataType: 'json', // 确保返回 JSON
        success: function (response) {
            if (response.status === 'success') {
                alert(response.message);
            } else {
                alert(response.message);
            }
        },
        error: function (xhr, status, error) {
            // 错误处理
            alert('错误: ' + error);
        }
    });
}

安全性

由于往数据库中插入数据，此操作需要注意安全性。一般可以通过key进行验证，如果对安全存在较高要求可以联系我们提供高安全性解决方案。
例：控制器中添加验证方法

	//验证合法性
	private function vt($key){
        //设定一个Key值
		if($key == 'DQFLP-62W6F-AUBOB-I4SBZ-CWLH4-ERQUW'){
			return true;
		} else {
			return false;
		}
	}

前端提交时需要向服务端传递此Key值，用以验证。完整用法参见api.php控制器。

API接口中添加Session变量

在控制器文件中写入接口函数。

public function addlog(Request $request){
        //从session获得当前用户赋值给变量
        $username = Session::get('username');
        // 获取所有 POST 数据
		$postData = $request->post(); 
        // cuname为前端传递过来的参数名，替换为实际的参数名
		$cuname = isset($postData['cuname']) ? $postData['cuname'] : '无数据'; 


		// 添加插入数据
		$data = [
			'LID' => Db::raw('NEWID()'), 
            //USERNAME指定为变量的值
			'USERNAME' => $username,
			'LOGTYPE' => 'WebApp',
			'LOGDETAIL' => 'API数据日志',
			'COMPUTERNAME' => '127.0.0.1',
			'LOGDATE' => Db::raw('GETDATE()'),
			'PLATFORM' => ''
		];
		// 向数据库表中插入数据
		$result = Db::table('SYS_LOG')->insert($data);

		if ($result) {
			return json(['status' => 'success', 'message' => '日志写入成功']);
		} else {
			return json(['status' => 'error', 'message' => '日志写入失败']);
		}

	}

Ajax请求时在路径中传递参数

控制器中添加下面的接口函数

	public function addlog($cname)
	{
		// 添加插入数据
		$data = [
			'LID' => Db::raw('NEWID()'),
			'USERNAME' => $cname,
			'LOGTYPE' => 'WebApp',
			'LOGDETAIL' => 'API数据日志',
			'COMPUTERNAME' => '127.0.0.1',
			'LOGDATE' => Db::raw('GETDATE()'),
			'PLATFORM' => ''
		];
		// 向数据库表中插入数据
		$result = Db::table('SYS_LOG')->insert($data);

		if ($result) {
			return json(['status' => 'success', 'message' => '日志写入成功']);
		} else {
			return json(['status' => 'error', 'message' => '日志写入失败']);
		}
	}

模板脚本中写入

$(function () {
	/*此处编写自定义代码，请确认此js文件名与您想修改的模板编号一致 */
	$.ajax({ 
		url: '/index.php/index/api/addlog/key/9370/cname/admin', 
		async: true, 
		type: 'GET', 
		data: {}, 
		success: function (e) { 
			console.log(e); 
		} 
	});

});

自定义控制器

警告

api.php是系统提供的默认的控制器接口文件。如果需要在控制器中写较多的API接口，或写通用的接口，那么可以新建控制器或复制一份Api.php单独处理。复制后更改文件名和文件内控制器名。控制器名如果使用驼峰命名法建议第一个字母大写，其余小写，避免出现解析错误。下面是一个示例。

文件名为：Apilog.php

<?php
namespace app\index\controller;
use think\Db;
use think\Request;
use think\Session;
use think\Cookie;
//需要验证登录改成 class Api extends common
class Apilog extends \think\Controller{  //这里的Apilog需要与文件名一致

	//获取日志信息
	//访问地址http://IP:9375/index.php/index/api/getlog/key/9370
	public function getlog($key=''){
		if(self::vt($key) == false){
			return 'nokey';
		}
 		$res = Db::table('SYS_LOG')
			->field('USERNAME AS F_5774,LOGTYPE AS F_5775,LOGDETAIL AS F_5776')
			->where('YEAR(LOGDATE) = YEAR(GETDATE())')
			->limit(100)
			->select();
		return json($res); 
	}

	//验证合法性
	private function vt($key){
		if($key == '9370'){
			return true;
		} else {
			return false;
		}
	}
}
沪公安备31011502002146号|沪ICP备13033196
Copyright © 2025 快表软件