可手持在过帐前用键替换自动完成的值
Handsontable Replace autocomplete values with key before posting
我使用HandsOnTable使编辑数据库表在我的网站上更具交互性。
HandsOnTable几乎满足了我的所有要求,只是数据库中的某些列实际上存储外键而不是本地字符串值。
在UI中,我希望这些列显示为下拉菜单,用户可以在其中选择映射到前面提到的外键的可读值(例如,类似于HTML名称/值select
)。
遗憾的是HandsOnTable没有这样的单元格类型。最接近它的是autocomplete
。这允许我创建一个下拉列表,但它只包含值;没有相应的密钥。以下是它的创建方式:
"source": ["Jebediah", "Bob", "Bill", "Buzz"]
所以我计划从服务器发送两个Json字符串:
一个包含HandsOnTable渲染表所需的参数:
{
"data": [
{ "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
{ "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
{ "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
{ "ID": 4, "Description": "Wood", "Volume": '513', "Customer": "Buzz" }
],
"columns": [
{ "data": "ID", "type": "numeric" },
{ "data": "Description", "type": "text"},
{ "data: "Volume", "type": "numeric" },
{ "data": "color", "type": "autocomplete", "strict": "true",
"source": ["Jebediah", "Bob", "Bill", "Buzz"]}
]
}
第二个映射键到值
{
"mappings": [
{"key": 0, "value": "Jebediah"},
{"key": 0, "value": "Bob"},
{"key": 0, "value": "Bill"},
{"key": 0, "value": "Buzz"}
]
}
到目前为止还不错。现在是棘手的部分:
HandsOnTable有一个函数(getData()
),它允许我以Json字符串的形式检索表数据,准备发送回服务器:
var jdata = myHandsOnTable.getData();
jdata的样子是这样的:
"data": [
{ "ID": 1, "Description": "Crude", "Volume": 204, "Customer": "jebediah" },
{ "ID": 2, "Description": "Hidrogen", "Volume": 513, "Customer": "Bob" },
{ "ID": 3, "Description": "Coal", "Volume": '67', "Customer": "Bill" },
{ "ID": 4, "Description": "Wood", "Volume": '513', "Customer": "Buzz" }
]
现在,在发布之前,我想将Customer
节点的值替换为mappings
json字符串中的匹配对键。
如何在JavaScript/JQuery中最好地实现这一点?
有没有一个函数可以如下工作?:
jdata.replaceNode('node', mappings)
感谢
我遇到了类似的问题,下面是我所做的。。。
对于每个外键列,我在handontable中存储了2个值;一个用于id本身,我将其设置为隐藏列,另一个是作为下拉列表的用户友好可读的文本值。
每次更改下拉列表的值时,我也会更改相应的隐藏id。在我的情况下,我在handontable之外有一个下拉列表作为过滤器,用于映射键/值对,但您可以使用哈希表或其他任何东西。
现在代码。。。
手持配置:
afterChange: function (changes, source) { AfterChange(changes, source); }
更改后事件(每次表中有更改时调用):
function AfterChange(Changes, Source) {
if (Source === 'loadData') {
return; //don't save this change
}
var rowIndex = 0, columnID = 1, oldTextVal = 2, newTextVal = 3, ntv = '', nv = '';
$(Changes).each(function () {
if (this[columnID] === 'CategoryID') {
// Do nothing...
//To make sure nothing else happens when this column is set through below
}
else if (this[columnID] === 'CategoryName') {
ntv = this[newTextVal];
//This is where I do my mapping using a dropdown.
nv = $('#CategoriesFilterDropdown option').filter(function () { return $(this).text() === ntv; }).val();
//13 is my CategoryID column
$container.handsontable('setDataAtCell', this[rowIndex], 13, nv);
}
});
}
}
通过这种方式,您可以根据需要更改外键,并且在保存之前不需要遍历所有外键。它还可以方便地将表数据原样发送回服务器。
在摘要中,
- 用户与
CategoryName
列(类型为autocomplete
)进行交互 - 通过使用Handontable的
colWidths
选项将列宽设置为0,用户可以隐藏CatgoryID
列 - 当
CategoryName
字段发生更改时,使用afterChange
事件设置相应的CategoryID
列。在我的情况下,我使用页面上其他地方的下拉列表来映射Name=>ID,但您可以使用其他方式,如哈希表
我希望它有意义。。。
- 无法从 jQuery RSS Feed 中的 localStorage 动态替换类
- 我如何找到一个句子中的所有空格并替换忽略它们
- 如何用更合适的内容替换document.write
- 是否有任何方法可以使用jQuery替换在数组中定义值的文本
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 用空格替换下划线PHP
- str.split(someString).join(someOtherString)是否等效于替换
- 使用javascript的图像替换循环
- window.location替换并传递URL历史记录条目中的变量
- 替换标记中的属性
- 指令的模板必须只有一个根元素:With restrict E&替换true
- AngularJs对ng消息的自定义替换
- 用超链接替换URLS
- 用cdata标记替换脚本标记
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 在javascript中,I'我很难弄清楚如何让regex只替换捕获而不替换匹配
- 替换url中变量的值
- 我希望在不替换现有变量的情况下恢复localStorage中的变量
- Wordpress:替换源(域名)链接
- javascript替换换行符和特殊字符