Silverlight 4 RIA Service dataform Template, 代码选择控件,Validate验证使用技巧 功能 定义只读,新增,编辑三块模块 定义模板的目的是更好的复用和提高 主要有表头,多个表体组成,为了把所有操作尽量在一个页面中完成,表头使用一个DataForm空间,表体使用DataGrid和DataForm组合实现。 而DataForm有三种状态分别是只读(显示不可编辑),编辑,新增。 提示:布局使用Data Filed控件系统默认根据DataForm控件的状态改变Data Field编辑状态 下图是编辑状态下的布局 ? 模板文件 ? XAML代码 ?
= null&&this.dataForm.fVerificationCycle ! =''){ console.log(this.dataForm.fVerificationDate) var a=moment(this.dataForm.fVerificationDate ) ; console.log("检定周期"+(this.dataForm.fVerificationCycle)); if(this.dataForm.fVerificationDate = null&&this.dataForm.fVerificationCycle ! this.dataForm.fNextVerificationDate=this.dataForm.fVerificationDate+((this.dataForm.fVerificationCycle
dataForm.id ? ] + '名称'" prop="name"> <el-input v-model="<em>dataForm</em>.name" :placeholder="menuTypeList[<em>dataForm</em>.type 根节点':<em>dataForm</em>.parentName" :nodeKey="''+<em>dataForm</em>.parentId" :currentChangeHandle="handleTreeSelectChange > </el-form-item> <el-form-item v-if="dataForm.type ! $refs['dataForm'].validate((valid) => { if (valid) { this.
="" prop="id" v-if="dataForm.isPrimaryKey"> <el-input v-model="<em>dataForm</em>.id" auto-complete <el-form-item label="所属部门名称" prop="deptName" v-if="<em>dataForm</em>.isPrimaryKey"> <el-input v-model="<em>dataForm</em>.deptName" auto-complete="off"></el-input> </el-form-item> <el-form-item label="时间范围" prop="timeScope" v-if="<em>dataForm</em>.isPrimaryKey"> <el-input $refs.dataForm.validate((valid) => { if (valid) { this.
Silverlight企业应用框架设计【六】自定义系统菜单(使用自己的DataForm) SilverLight企业应用框架设计【五】客户端调用服务端(使用JSON传递数据,自己实现RESTful Web YorRIAService].g.cs 这个隐藏文件里 如果我们抛弃RIAService, 那么势必将自己完成这些代码生成工作 在我们这个系列中将介绍到 每次编译程序都会自动生成这些代码 的技巧 三:自己实现的DataForm 控件 Silverlight提供的DataForm控件用以编辑实体 非常强大 但是太过强大了,把一些操作搞他复杂了 咱们这个系列将使用自己的DataForm控件 完成实体编辑业务逻辑 ---------
/schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:dataForm ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm.Toolkit"
: number } interface dateType { [propName: string]: formObj } const hasArr = (dataForm: dateType) => { const obj = Object.create(null); for (const item in dataForm) { const keyArr: any = [dataForm [item].value, []]; if (dataForm[item].required) { keyArr[1].push = Validators.required } if (dataForm[item].maxLength) { keyArr[1].push = Validators.maxLength(dataForm[item].maxLength as number) } obj[item] = keyArr } return obj } this.fb.group(hasArr(dataForm)) 行内样式 <nz-date-picker
width="40%" :visible.sync="editDialogVisible" :close-on-click-modal="false"> <el-form :model="<em>dataForm</em> " label-width="80px" :rules="dataFormRules" ref="<em>dataForm</em>"> <el-form-item label="ID" prop ="id"> <el-input v-model="<em>dataForm</em>.id" :disabled="true" auto-complete="off"></el-input $refs.dataForm.validate((valid) => { if (valid) { this. = data.id this.dataForm.deptName = data.name } }, mounted() {
概述 1.最外层DataForm为空壳编辑数据用。 可以有多个DataForm,例如福利DataForm,抽奖DataForm 2.Menu层为左边栏层,每个DataForm可以使用不同样式的MenuForm预制体 3.DataForm中使用ReorderList ,可排列配置 4.有定位功能,跳转到对应页签 5.DataForm具有树状图管理,1级,2级菜单 6.PageForm为每个页签的具体生命周期脚本,由DataForm控制。 item.m_secondIdx = 0; first.SetActive(true); TabViewItem firstData = m_dataForm.m_listItem [i].m_listSubItem.Count; for (int secondIdx = 0; secondIdx < m_dataForm.m_listItem
. // 父级传过来的数据 } = props; // console.log(props); // 弹框 form 数据 const dataForm = form.getFieldsValue okButtonStatus = true; // 获取输入框的错误信息 const dataFormError = form.getFieldsError(); // 输入正确判断 if(dataForm.name const handleFormData = () => { // 每次打开弹窗时,初始化表单数据 // form.resetFields(); return dataForm
[] // 后端获取的总数据 } }, 2.script中 获取后端数据 //获取初始数据 getDataList(){ api.agentDealiyWMExport(this.dataForm val - 1) * this.pageSize, val * this.pageSize) }, 改变条数事件 // val每页显示多少条 handleSizeChange(val) { this.dataForm.pageSize
}], // 下拉选项 }, { label: '手机号', field: 'phone', initialValue: obj.phone, }]; const dataForm 'form' : 'text'; // 传入 form,表单配置,想要的数据形式 return renderDataForm(form, conf, dataForm)); } 实现思路 如上图所示 })(<FormText />)} </FormItem> 具体实现 1、形式选择(表单组件 or 文本) const renderDataForm = (form, conf = {}, dataForm sex: 'male', file: [{ fileId: '123', name: '信用承诺书', size: 1024 }], }; // 因为数据的形式默认为表单,所以 dataForm : '信用承诺书', field: 'file', initialValue: obj.file, formItemType: 'Upload', }]; const dataForm
$refs['dataForm'].clearValidate() }) }, // 更新保存方法 updateData() { this. $refs['dataForm'].validate((valid) => { if (valid) { const tempData = Object.assign $refs['dataForm'].validate((valid) => { if (valid) { createMallFnCategory(this.temp $refs['dataForm'].clearValidate() }) }, // 更新保存方法 updateData() { this. $refs['dataForm'].clearValidate() }) }, // 更新保存方法 updateData() { this.
return R.ok(); } 前端VUE+element表单:
(类图里面Tree、Main1、DataDelete1、DataForm1、DataList1不是父类,而是共用页面) 这个是依据自然框架的特点来设置的,目的就是把共用的代码都放到父类里面 2、 DataForm1、DataForm1.aspx。public partial class DataForm1 : Base.BasePageForm 表单的共用页面。 由于自然框架采用了“自定义控件+元数据”的方式,所以20%以上的表单页面都可以由这个页面来实现,上次视频演示的Demo里面,添加新闻、添加分类的表单都是DataForm1.aspx。
这个页面并没有用DataForm1.aspx页面,而是单独做了一个,上面用表单控件,下面用iframe。 Iframe指向一个tab标签页,每一个标签又可以指向一个页面,可以是DataList1.aspx,也可以是DataForm1.aspx,当然也可以是其他页面。 这样就可以无限扩展下去。
$refs['dataForm'].validate((valid)=> { if (valid) { const tempData = Object.assign( $refs['dataForm'].validate((valid)=> { if (valid) { createProperty(this.temp).then( $refs['dataForm'].clearValidate() }) }, // 列表查询 getList() { this.listLoading $refs['dataForm'].validate((valid)=> { if (valid) { const tempData = Object.assign( $refs['dataForm'].clearValidate() }) }, // 列表查询 getList() { this.listLoading
="false"
:on-success="handleUploadSuccess"
:before-upload="beforeUpload">
textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="50%"> <el-form :rules="rules" ref="<em>dataForm</em> $refs['<em>dataForm</em>'].clearValidate() this. $refs['<em>dataForm</em>'].clearValidate() this.
label asp-for="Email"></label>
<input asp-for="Email" />
</form>
使用同样结构的实体类,WPF还可以这么使用:
<dc:DataForm ="State"/>
</dc:DataFormFieldDescriptor.SubFields>
</dc:DataFormFieldDescriptor>
</dc:DataForm >
由DataForm选择表单元素并生成的做法也很多人喜欢,但对实体类的要求也较高。 DataForm通常还可以更进一步--反射实体类的所有属性自动创建表单。如果需要的话可以直接买一个包含DataForm的控件库,或者将SilverlightTookit的DataForm移植过来用。