DevExtreme dxSelectBox 联动查询案例

        //数据获取
lookupDataSource = new DevExpress.data.DataSource({
store: storeInitValue, //数据源
sort: { getter: "time", desc: true }, //排序
filter: ["ProjectKey", "=", Application1.ProjectKey], //过滤
map: function (item) {
return new ini_valueViewModel(item);
}
}); //数据更新
function handleDataSourceChanged() {
isReady.resolve();
lookupDataSource.off("changed", handleDataSourceChanged);
}
lookupDataSource.on("changed", handleDataSourceChanged); return {
typedatasourceChange: function (e) {
//从新更新数据
lookupDataSource.filter([["ProjectKey", "=", Application1.ProjectKey], '&&', ["TypeName", "=", e.value]]);
lookupDataSource.reload();
//数据重新加载
},
typedatasource: typedatasource, //类型
lookupDataSource: lookupDataSource, //名称
control: control,
handleSave: handleSave,
handleCancel: handleCancel,
viewShowing: handleViewShowing,
isReady: isReady.promise()
};
<div data-options="dxView : { name: 'ControlEdit', mode: 'edit', title: '测点设置' } ">
<div data-bind="dxCommand: { onExecute: handleSave, id: 'save', title: 'Save', icon: 'save' } "></div>
<div data-bind="dxCommand: { onExecute: handleCancel, id: 'cancel', behavior: 'back', title: 'Cancel', icon: 'close' }"></div>
<div data-options="dxContent : { targetPlaceholder: 'content' } " class="dx-edit-view dx-content-background dx-form-background" data-bind="dxDeferRendering: { showLoadIndicator: true, staggerItemSelector: '.dx-field', animation: 'edit-item-rendered', renderWhen: isReady }">
<div data-bind="dxScrollView: { }">
<div class="dx-fieldset">
<div class="dx-field">
<div class="dx-field-label">测点类型: </div>
<div data-bind="dxSelectBox:{
dataSource: typedatasource,
placeholder: '测点分类',
displayExpr: 'Name',
valueExpr: 'TableName',
value: control.TypeName,
onValueChanged:typedatasourceChange}">
</div>
</div>
<div class="dx-field">
<div class="dx-field-label">测点名称: </div>
<div data-bind="dxSelectBox:{
dataSource: lookupDataSource,
placeholder: '测点编号',
displayExpr: 'name',
valueExpr: 'name',
value: control.name}">
</div>
</div> <div class="dx-field">
<div class="dx-field-label">控制值: </div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: control.WarningUp, placeholder: '控制值' }"></div>
</div>
<div class="dx-field">
<div class="dx-field-label">报警值: </div>
<div class="dx-field-value" data-bind="dxNumberBox: { value: control.EarlyWarningUp, placeholder: '报警值' }"></div>
</div>
</div>
</div>
</div>
</div>

DevExtreme 学习应用[3]的更多相关文章

  1. DevExtreme 学习应用[2]

    DevExtreme 学习应用[2] 调用WebService数据 1那么首先建立WebService using System; using System.Collections.Generic; ...

  2. DevExtreme 学习应用[1]

    DevExtreme学习开发 [1] 用HTML开发手机应用,看一哈帮助文档觉得还很不错. 在开发前一定要安装DevExteme  下载连接地址: ftp://211.101.1.108/DevExp ...

  3. DevExtreme学习笔记(一) DataGrid中MVC分析

    @(Html.DevExtreme().DataGrid() .ID("gridContainer") .DataSource(d => d .OData() .Url(&q ...

  4. DevExtreme学习笔记(一)treeView(搜索固定、节点展开和收缩)注意事项

    var treeConfig1 = dxConfig.treeView(obj_Question.treeDataSource1); treeConfig1.selectionMode = 'sing ...

  5. DevExtreme学习笔记(一) DataGrid中数据提交注意事项

    1.数据提交的{}数据需转化json格式 syncPost('/controller/action', { values: JSON.stringify({d:x}) }, function (res ...

  6. DevExtreme学习笔记(一) DataGrid中数据筛选

    config.filterRow = { visible: true, applyFilter: "auto" }; config.headerFilter = { visible ...

  7. DevExtreme学习笔记(一) DataGrid中注意事项

    1.阻止cell编辑 config.onEditorPreparing = function (e) { if (e.dataField === 'xx' && e.row.data. ...

  8. DevExtreme学习笔记(一) DataGrid中js分析

    1.overviewjs采用 $(function() { $("#gridContainer").dxDataGrid({ dataSource: { store: { type ...

  9. ABP 基于DDD的.NET开发框架 学习(五)中使用DevExpress插件

    1.DevExpress安装 安装步骤1:开始安装 安装步骤2:选择需要安装的模块 安装步骤3:修改安装路径 安装步骤4:正在安装 安装步骤5:安装完成 2.Vs中设置 1)DevExtremeBun ...

随机推荐

  1. hihoCoder #1078 : 线段树的区间修改(线段树区间更新板子题)

    #1078 : 线段树的区间修改 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 对于小Ho表现出的对线段树的理解,小Hi表示挺满意的,但是满意就够了么?于是小Hi将问题 ...

  2. [bzoj1316] 树上的询问

    裸的点分治.. 及时把已经确定的询问清掉就能快不少.时间复杂度O(nlogn*p) #include<cstdio> #include<iostream> #include&l ...

  3. BZOJ 3195: [Jxoi2012]奇怪的道路(状压dp)

    f[i][j][s]表示当前处理第i个点,前i-1个点已连j条边,第i个点开始k个点的奇偶性状态. #include<cstring>#include<algorithm>#i ...

  4. 2017ecjtu-summer training #4 CodeForces 731C

    C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...

  5. Lua语言的介绍和编程语言的归类

    Lua 本条目介绍的是一种编程语言.关于关于Lua在维基百科中的使用,请见"维基百科:Lua".关于"Lua"一词的其他意思,请见"卢阿". ...

  6. 使用nginx作为websocket的proxy server

    blog.csdn.net/zhx6044/article/details/50278765 WebSocket WebSocket协议为创建客户端和服务器端需要实时双向通讯的webapp提供了一个选 ...

  7. Win7如何分享局域网并设置共享文件夹账户和密码

    https://jingyan.baidu.com/article/ceb9fb10ddf6c08cad2ba017.html 在办公或者其他场所,我们需要分享自己的文件给朋友或者同事,但又不想同一局 ...

  8. geotools实现多边形的合并&缓冲区

    这算是第一次接触开源工具包,说实话刚开始有点不知所措,中途遇到很多问题的时候也感觉头皮发麻,不过很高兴自己还是坚持下来了. geotools就不做过多的介绍了,想总结一下如何根据开源内容做自己的项目. ...

  9. Ubuntu问题:E45: 'readonly' option is set (add ! to override)错误解决

    问题描述:E45: 'readonly' option is set (add ! to override) 问题分析:该错误为当前用户没有权限对文件作修改 问题解决: 输入 :w !sudo tee ...

  10. Vue.js学习网址

    Vue官网:http://cn.vuejs.org/v2/guide/index.html 淘宝镜像:http://npm.taobao.org/ Vue-router:https://router. ...