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. HDU 1024 Max Sum Plus Plus【动态规划求最大M子段和详解 】

    Max Sum Plus Plus Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  2. Vijos P1448 校门外的树【多解,线段树,树状数组,括号序列法+暴力优化】

    校门外的树 描述 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的…… 如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作: K=1,K= ...

  3. 【CC2530入门教程-增强版】基础技能综合实训案例(基础版)-上位机源码

    [CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院  欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...

  4. angular4 中自定义pagination组件

    你用Angular 吗? 一.介绍 一个基于angular4 开发的可以分页的组件.组件的好处就是可以复用,复用.....作为一个前端码农,开始的分页功能实现是我用jquery写的,其他同事用的时候都 ...

  5. [知了堂学习笔记]_牵线Eclipse和Tomcat第二篇 —— 安装Tomcat&&添加Tomcat到Eclipse

    来了来了~~~~~我们的"织女"--Tomcat来了,牛郎们等急了吧!哈哈! 一.安装Tomcat 下载地址:http://tomcat.apache.org/download-7 ...

  6. c语言一个处理文本文件的例子

    功能 读取一个文本文件,将其中的文本按规则转换为int数据,然后对数据进行处理.文本的格式类似36 565 233... 代码 #include <stdio.h> #include &l ...

  7. ASPNET5 依赖注入(Dependency Injection)

    依赖注入一直是asp.net web框架(Web API,SignalR and MVC)中不可或缺的一部分,但是在以前,这个框架都是各自升级,都有各自的依赖注入实现方式,即使Katana项目想通过O ...

  8. 2017-06-20 (pwd ls cd)

    pwd pwd   显示当前所在的位置 pwd -P  如果是链接文件,显示链接文件所指的位置 ls ls 查询目录中的内容 ls  -a 显示所有的文件,包含隐藏的文件   -l 显示详细的信息   ...

  9. junit4X系列--Builder、Request与JUnitCore

    原文出处:http://www.blogjava.net/DLevin/archive/2012/05/12/377957.html.感谢作者的无私分享. 初次用文字的方式记录读源码的过程,不知道怎么 ...

  10. java常用类--正则表达式

    正则表达式到底是什么? 在编写处理字符串的程序或网页时,经常会有查找符合某些复杂规则的字符串的需要.正则表达式就是用于描述这些规则的工具.换句话说,正则表达式就是记录文本规则的代码. 很可能你使用过W ...