本帖最后由 谢厅 于 2019-11-21 11:17 编辑
高产似母猪
1. 需求详情
a. 场景：在我的系统中，产品表中有很多的产品，产品的重要信息包含了图片、价格、尺寸等；在我的初始系统中使用了格子自带的“组合框“单元格类型配合绑定库以及“输入时匹配”的功能完成。这个功能本身已经足够强大和快速。
b. 但是，这里我要转折了。员工说有时候很多产品的名称足够相近，在我们普通人的眼里看来，产品的图片可以让我们更直观地确认我们现在需要的是哪个产品，那么他们就提了个要求，要能输入时能自动匹配产品，并且把关键信息以像“百度搜索”的搜索历史一样向下列表显示。
c. 虽然，我觉得他们（其实是我自己想的需求）有时候有点得寸进尺，但是本着【技术是生命的源泉】这一理论，我还是着手鼓捣了这个需求
2. 效果演示
3. 思路
a. 我们暂定以活字格的“文本框”单元格类型作为基础为它扩展此功能
b. 我们需要实时监听到文本框值的变化
i. 这里我们需要注意：活字格“文本框”单元格类型是可以编辑命令的
ii. 但是缺点在于，这个命令的触发时机是“值发生变化”并且“单元格失去焦点”
iii. 所以我们要改造这个“文本框“，方案是不为这个”文本框“设置命令，用JavaScript扩展它的监听命令
c. 当我们监听到值变化的时候
i. 通过输入的值去进行数据库的查询，获得到我们需要的关键信息
1) 这里，我们可以通过JSAPI里面的getTableDataByOData方法来自 <https://help.grapecity.com.cn/pa ... pageId=12486075>
来进行数据的获取
2) 当然我们也可以用其他的方式来获取数据库中的数据
ii. 解析这些数据，并且把它渲染成页面的元素
1) 一般我们拿到的数据结果都是一堆对象组成的数组，我们循环这个数组，对每一个对象的数据进行解析（例：我们这里就分别拿到图片的url/文字描述）
2) 对于每一个循环得到的数据，我们渲染元素（说的很高大上，对于我们菜鸟来讲，就是拼接一个html的字符串
iii. 把页面元素添加到页面中
iv. 代码我们写好了，怎么让这个页面能具备这个扩展功能呢？
1) 为了不拖累其他页面的加载速度，我们决定把在这个初始化代码放到页面的js资源文件夹中
2) 放进去以后我们运行时会发现，这个代码失灵时不灵，研究原因在于，在这个地方代码在页面加载时会被执行一次，但是，这个时候我们的”文本框“可能还没被渲染出来，所以代码就不会管用
3) 解决办法：把这一堆代码包进一个定时器中，在页面加载时延迟一秒执行（当然这个办法有点low，应该还有其他更好的办法 ，请各位大侠教教我）
4. 实操
a. 改代码（input.js）。代码中需要改动的部分应该是查询数据库的字符串，以及得到结果肯定会因为大家的字段不同，各有不同，相应更改即可）
代码如下：
- setTimeout(() => {
- var offset = $("[fgcname='input']").position();
- var top = offset.top + $("[fgcname='input']").outerHeight() + 5;
- var width = $("[fgcname='input']").outerWidth()
- var left = offset.left;
- $("[fgcname='input']").after("<div id='listContainer' style='z-index:999;display:none; width:" + width + "px;height:auto;left:" + left + "px;top:" + top + "px;position:absolute'><div id='list' style='position:absolute;width:" + width + "px; height: auto; border: 1px;border-radius: 4px;background-color:rgba(233,233,233,1);padding: 5px;'></div></div>");
- var element = $("[fgcname='input']").find("input");
- element.bind('input propertychange', function () {
- if (element.val() == "") {
- $("#list").empty();
- $("#listContainer").css('display', 'none');
- } else {
- var productOdata = "产品表?$select=产品名称,URL,文字描述&$filter=contains(产品名称,'" + element.val() + "')";
- Forguncy.getTableDataByOData(productOdata,
- function (data) {
- $("#list").empty();
- for (let i = 0; i < data.length; i++) {
- var url = data[i]["URL"];
- var text = data[i]["文字描述"];
- addImage(url, text);
- }
- },
- function (errorMessage) {
- alert("出现网络故障");
- }
- );
- }
- });
- function addImage(url, txt) {
- $("#listContainer").css('display', 'block');
- var htmlText = "<div style='max-width: " + (width - 10) + "px;height: auto;;'><img style='max-width: " + (width - 10) + "px;' src='" + url + "' alt=''><div style='font-size: 10px;'>" + txt + "</div></div>";
- $("#list").append(htmlText);
- }
- function addText() {
- }
- }, 1000);
b. 在活字格页面中，拉一个“文本框”单元格，并且命名为"input"
c. 在页面的js资源文件夹中上传我们的input.js文件
d. 运行测试
e. 注意点：因为图片的加载需要时间，为了提升速度，建议把图片放进腾讯云对象储存COS或者阿里云对象储存OSS，并且进行CDN加速
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图
文本框可以监听实现了，但是组合框里有两个input好像就失效了，大神，组合框要怎么写
