dynamicCondition组件升级为2.0.2版本——版本向前兼容


日期：2019-01-04
版本：v2.0.2
1.新增requestDataType配置。
    对PHP更友好，之前复杂查询请求数据格式是方便java后台获取数据，用的数组模式。
    可以通过配置requestDataType，使用json字符串提交请求数据，方便PHP后台接收。
2.新增查询条件无弹窗模式。
    不用弹窗窗口填写查询条件，与传统UI类似，直接在界面上填写查询条件。

版本向前兼容。高版本可以直接替换低版本对之前的代码没有任何影响。

按查询条件是否弹窗分为：弹窗/无弹窗模式

按查询条件是否复杂分为：简单/复杂模式

具体使用组合就有四种模式。系统可以选择合适的使用。他们互相切换起来也比较简单。可以体验下demo

简单无弹窗模式：该模式与传统的查询条件UI最接近。可以在不改后台代码情况下替换成改模式。

复杂无弹窗模式：个人比较推荐使用该模式。需要后台编写相应逻辑配合使用。

1.requestDataType配置示例：

var dc = dynamicCondition.create({
  		//通过容器选择器传入，也可以$("#dynamicCondition"),或者document.getElementById("dynamicCondition")
  		elem:"#dynamicCondition" 
	  	,tableId:"listTableId" 
		,conditionTextId:"#msg"
                 //PHP后台则添加该配置，后台可以通过$_POST['jsonStr'] 获取查询参数json字符串。然后转为数组。
		,requestDataType: "json" 
})

2.传统的查询功能可以替换为简单查询，无弹窗模式。
不需要修改后台代码，只需要按照dynamicCondition组件配置好查询条件。
dynamicCondition查询条件支持扩展，之前能实现的编辑器，都只可以扩展。如下拉框联动，下拉树，单选组，复选框等等。
简单查询无弹窗模式demo。

配置无弹窗模式有2中方法：

1.调用dynamicCondition.create时配置。

var dcInstance = dynamicCondition.create({fields : "#dcDemo"
	  	//,tableId:"listTable"  
		,conditionTextId:"#msg" //unpopup模式必须配置conditionTextId
		,displayModel : 'unpopup' //默认为popup。无弹窗模式请配置unpopup
            ...
	});

2.通过dcInstance.setDisplayModel('unpopup')配置。注意之前必须配置conditionTextId。

注意：使用无弹窗模式必须调用dc.setCondition配置初始条件。否则初始条件为0，之后无法添加条件

体验地址：带后台的查询demo

dynamicCondition组件升级为2.0.2版本——版本向前兼容

猜你喜欢