2024年2月8日发(作者：)

Smart UI前台开发帮助

1. 开发规范

1.1. HTML

1.1.1. HTML命名规范

类型 命名对象 命名 代码Demo

类型简写+ P_+业务名(需求阶段已定义好)_+操作名（Add/Edit/Search等）+ 操作对象+ 命名

（业务）命名（首字母小写）

< li id="searchSupp">

< dd id="searchSupp">

< dt id="searchSupp">

< dl id="searchSupp">

< table id="searchSupp">

< th id="searchSupp">

< tr id="searchSupp">

< td id="searchSupp">

< dl id="searchSupp">

txt

btn

chk

rdo

hid

fle

txt

sel

op

lnk

img

lbl

fnt

btn

text/password

input标签

button

checkbox

radio

hidden

file

textarea

select

option

a

img

label

font

button

div

ul

ol

li

dd

dt

dl

table

th

tr

td

tbody

常用

容器标签

thead

tfoot

samp

span

p

其他

< thead id="searchSupp">

< tfoot id="searchSupp">

< samp id="searchSupp">

< span id="searchSupp">

< p id="searchSupp">

---

< br />

如：查询：txtsName，编辑：txtName

hr

br

所有用于查询的标签,

类型简写后加’s’

特殊命名

1.1.2. HTML编写要求

1) 要求只能使用上述规定的标签

2) 每个标签要求结构完整；

如：应写为:

除hr、br、img、input外标签都应该是标签对完整的

---

3) 除容器和文字标签外，不允许在标签中放置内容。

错误的写法：库

存

正确的应该是：

4) 关于对象的样式设置应该尽量使用系统定义的样式，除特殊的情况。

如：

1.2. JS

1.2.1. Javascript

1.2.1.1. JS命名规范

类型 命名对象

命名

(类型简写+命名)

str

i

d

arr

dt

var strSuppName

var iSuppNo

var dSuppNo

var arrSuppNames

代码Demo

string

基础数据类型

int

decmail

array

date

var dSuppStopDateTime

Json

扩展

特殊对象类型

jsn

sb

命名

"_"+类型简写(包括Dom)+命名

类型简写(包括Dom)+命名

命名（首字母小写）

类型简写(包括Dom)+命名（全小写）

var jsnPostdata

var sbSuppName

var _strSuppName = ‘’;

var strSuppName = ‘’;

function addSupp()

function addSupp(suppid)

StringBulider

object(class)

局部变量

常用

全局变量

function

function param

1.2.1.2. JS注释规范

类型 命名对象

在编写js注释时，各命名

首字母大写；可以只用or进行多个对象的串联，不允许有空格

Dom

JQDom

JQ + 选择器名 + Str

String

Json

Bool

Function

Date

Number

DomStr

fncode

uicode

key

paramname

代码Demo

对象的类型名称

StringorJQSelect

Dom对象

Jquery Dom

类型定义

Function

Code

UI Code

主键

参数name

字串

Json对象

Bool对象

类型定义

Function

Date

Number

Html字串或Dom

FunctionCode

UICode

主键

全局参数名称

复合命名

特定命名

1.2.1.3. JS编写要求

1) 要求结构清晰，代码规范。

2) 所有string对象必须以'单引号包括起来，如内部需要在使用',使用转义符"

3) 一个function 中内容不能过长，应该适当根据功能拆分成多个function。

4) 所有dom对象尽量全部使用jquery的方法进行操作

5) 关于js数据类型的处理应尽量使用jshepler,类型的prototype来完成.

6) 尽量使用局部变量，减少全局变量的使用，以减少内存的占用

7) 减少js闭包的使用，尽量避免内存泄露的风险。

8) 使用var弱类型对象时应该明确标示其作用范围，一旦含义改变时一定要注释清楚。

9) 统一使用ipsa2.0的基础组件库（jscontrols）编码，非特殊情况禁止直接调用控件（plugin）。

10) $ihelper库中已包含大多数情况的操作，基础操作应该都用$ihelper完成。

1.2.2. Jquery

1.2.2.1. Jquery编写要求

1) 选择的性能的顺序是id>tag>class,所以使用时，尽量使用性能高的选择器。

2) 有意识的用多重匹配的选择器

如：$('#id : tag')

3) 尽量使用id选择器获取单个对象或者idselector的链结构方式查询

如：$('#parentid child')

4) 在使用数据对象，或是json对象时，最后一项一定不能加",",否则IE7下脚本会出错

5) 所有的dom对象的样式设置必须使用css()样式设置的方式，不能使用width()这种直接设置的方式。

1.2.3. jq plugins

1.2.3.1. jq plugins结构顺序

属性定义、私有变量、私有方法、主体方法

1.2.3.2. jq plugins编写要求

1) 严格按定义的结构编写，注明实现功能及更新记录、注释清晰、标准化

2) 控件编写之前，要将显示端html完成、css规范完成（所有命名必须有该plugin名称的前缀+‘-’+命名）。

3) 属性定义根据情况定义初始化值

4) 编写方法，需要详细了解基础库中的内容。判断是否是为可以为公用还是只能私有。

5) 绝对禁止有固定的ID对象

6) 对外部引入的控件，详细的使用实例，实例都需要完整；了解的代码和修改的功能都要详细注释。

7) 尽量采取在jscontrol的方式去控制控件达到需要的效果。

1.2.4. icontrols

对所有的plugins进行封装，对外统一出口，通过jsconfig设定各plugins属性初始化值

1.3. CSS

1.3.1. CSS基本命名规范

1) 采用组合命名规则，基本标签：对象简写+‘-’+功能命名；子对象为父对象命名+‘-’+功能命名

如：button：btn-save

2) 对于容器标签，则与对象命名相同即可

3) 了解各浏览器hack的写法

4) 明确各选择器的优先级，作用范围。

1.3.2. 全局CSS

1) body，主要控制内的所有内容的基础样式，如字体样式、背景等

2) *，清空所有对象的有影响的默认样式

3) 各类基础标签的通用样式

如：img{border-width: 0px;}

1.3.3. CSS编写规范

1) 使用CSS3.0的标准编写。

2) 子对象对采用链选择器的方式定义；

3) 对象尽量使用class选择器去匹配；对于特殊功能的才考虑使用ID选择器；

4) 标签选择器只能在全局CSS中定义，和子对象匹配的时候使用（也应尽量少使用），

其他时候禁止定义。

5) 开发端禁止使用滤镜；设计端也应尽量少使用滤镜。

1.3.4. CSS基本布局规范

基本布局类

页面所有内容的容器

页头

导航

左区域内容

主体内容

右区域内容

页脚

主菜单

左菜单

右菜单

page

header

navbar

全小写

Content-left

Content-main

Content-right

footer

mainmenu

leftmenu

rightmenu

1.3.5. CSS通用命名参考

通用类命名参考

登录

标志

子导航

子菜单

工具条

搜索

搜索按钮

标签页

列表

数据表

信息

提示

标题

loginbar

logo

subnav

submenu

toolbar

search

btn-search

tab

list

grid

msg

tips

title

网站地图

sitemap

1.4. Smart UI命名

类型 命名对象

UICode

Fncode

公共内容

命名

u_模块名_page命名

fn_模块简写+方法编号

ps_模块名

(PanelSearch)

pl_模块名

(PanelList)

pe_模块名

(PanelEdit)

pv_模块名

(PanelView)

c_页面区域命名

u_plun_BaseInput

fn_ns01

ps_User

pl_User

pe_User

pv_User

c_pv_User

代码Demo

查询区域

列表区域

编辑区域

编辑区域

页面区域父级容器

页面区域

2. 前台目录结构说明

2.1. 脚本文件（Javascript）

结构

-

-

-

-

business

-

config

-

-

core

-

-

-

-

-

-

-

-

-

-

-

const

$syscode

iconfig

$iconst

ictrcore

$ icontrol

$sw

$ihelper

对应脚本库

业务库目录

说明

FunctionCode和UICode的配置常量

配置库

默认配置库

常量

JS常量

Js开发核心

控件核心支持库

JS控件

Js对象扩展

架构的核心库，提供核心操作与公共方法

页面初始化、查询、编辑、删除数据等等一系列操作

Jquery开发版

Jquery注释版

Jquery压缩版

Json转换库

插件库

选择控件

plugins

-

-

-

Grid控件

翻页控件

Modal类控件：modalwindow、dialog、message

2.2. 样式文件 说明(App_Themes)

目录

- Default

- images

-

-

-

-

-

-

-

-

-

baselayout

controls

-

site

icons

global

图片

基础布局图片

各控件图片目录

图标

全局图片

网站图片

基础布局样式

控件样式

全局样式

网站样式

样式统一出口

说明

3. Js类库说明

3.1. Js类库结构图

3.2. 类库API

3.2.1. jsPrototype

主要是javascript本身通用的对象的扩展和公共方法的封装。

类型

Common

Function

方法

hasValue(value)

参数说明

value : [object],判断的值

返回值

bool

说明

判断是否为空对象，常用于值的判断，如：可以帮助处理json对象的0值的问题

strNotEmpty (value)

value : [string],判断的值

getStringValue(value)

getJsonValue(data,

propname)

value : [object],判断的值

data:json json数据单行对象

propname:string 属性名

value : [object],判断的值

min : [object],最小值

max : [object],最大值

text: [string],需要格式化的字串

bool

String

object

Object

判断String是否为空,或是空白串(trim处理)

将对象转换成String，为空时返回''

获取单条数据data中属性名为propname的值,出错时返回''

比较value，获取范围内数据.

getRangeValue(value, min, max)

getUrlParam()

getSaveText (text)

Array

String

获取Url参数

获取需要保存的文本，对文本内容进行格式化

数据验证

isInteger(value)

isFloat(value,

fraction)

value : [string],判断的值

value : [string],判断的值

fraction: [int],

小数位数

bool

bool

bool

检查是否为整数

检查是否为Float

运行正则进行test验证

regTest(reg, value)

reg: [int],

正则表达式

value : [string],判断的值

数据格式化

formatString(type,

value,format)

type:[string], 格式类型

value:[string], 值

format:[string],格式化配置(非必须)

formatStringForView(

type,value,format)

type:[string], 格式类型

value:[string], 值

format:[string], 格式化配置(非必须)

toDateStr(value,

showtime, format)

value:[string],值

showtime:[bool], 是否显示时间(非必须)

format:[string],格式化配置(非必须)

jsonToDate(value)

toDateNum(value)

toDecimal(value,

fraction)

toBool (value)

toBoolView(value,

ishtml)

value:[string], 值，必须为json格式的时间

value:[date],值

value:[string] 值

fraction:[number],小数位, 为空时，使用系统统一格式(非必须)

value:[string or number], 值

value:[string], 值

ishtml:[bool],是否为html格式(非必须)

toEnum(value, ename) value:[string], 值

ename:[string], 枚举名称

StringBuilder

(

value)

StringBuilder.

isNotEmpty()

()

StringBuilder.

toString(split)

StringBuilder.

removeLast

String

(text,params)

()

String. Replace

(oldstr, newstr)

text:[string], 格式化对象

params:[array],参数数组,字串格式

oldstr:[string],被替换的字符

newstr:[string],替换的字符

string

string

去空

扩展replace方法

String

占位符的string格式化

StringBuilder

删除最后一个添加的对象

split:[string],分割字符

string

转换为字符串返回

清空内容

bool

是否为空

value:[string] ,合并的数据

StringBuilder(value) value:[string],值

StringBuilder

StringBuilder

添加字符串

定义StringBuilder对象

string

将数据转换成Enum文本,为空时返回''

number

将数据转换成Bool显示格式,为空时返回''

bool

将数据转换成Bool(0,1)值,为空时返回''

number

float

date

将json字串日期转换成日期格式,为空时返回null

将日期转换成日期数字

将数据转换成Decimal格式,为空时返回''

String

将数据转换成日期格式字串,为空时返回''

object

将String格式化成显示的html格式,为空时返回''

object

对String进行格式化,为空时返回''

Date

()

Time()

(format)

format:[string],格式

date

datetime

string

bool

String转换成日期

String转换成日期时间

格式化日期

判断是否同一天

获取月份中的天数

isSameDay(d1, d2)

d1:[date],日期1

d2:[date],日期2

getDayNum(year, month)

year:[number],年份

month:[number],月份

file

getFileName(file)

file:[string],

文件全名

encode

getFileExtName(file)

encode(str)

decode(str)

file:[string],

文件全名

str:[string],

加密参数

str:[string],

加密参数

string

获取文件扩展名

加密字串

解密字串

string

获取文件名

3.2.2. $iconst(常量库)

主要记录js公共常量，用于多语言信息的处理，如：消息、枚举等

类型（首字母大写）

Common

Enum

Controls

gender

isstop

grid

pager

modal

对象

系统公共常量

系统枚举

性别枚举

是否停用枚举

控件常量

说明

3.2.3. iconfig(配置库)

记录各种公共的配置信息，各plugin的公共配置项。

类型

common

对象

类型

默认值

系统公共配置

说明

format

格式化配置

chooser

chooser控件的配置项的

css Array index: 100,

width: 0,

height: '' ,

left: 2,

top: 23

chooser的样式设置

repeatTml

repeat的通用模板

html

ctrItem

html模板

3.2.4. $sw(核心库)

类型

全局参数

方法/对象

$Params = {

urlParams: null

, currentDate: new Date()

, currentUI: null

, contentID: null区域

, client: null

, globalFn:null

}

参数说明

urlParams:[array],url参数

currentDate:[datetime],当前时间

currentUI:[string],当前uicode

contentID:[string],当前内容区域id

client: [array],当前用户信息

globalFn:[array],全局公共方法集合

全参数对象

说明

$obalParams()

$balData

(data)

$balFn(fn)

从缓存中读取的全局对象、主要是服务端的信息。

data:[array],参数对象

fn:[function],参数对象

设置全局参数,服务端的对象

设置全局执行的方法【在加载主区域时执行】

核心操作

$ = function (data, url,

data:string postData的对象

fnsucess, fnerror)

url:string 目标url

fnsucess:function 请求成功后的操作(非必须)

fnerror:function 请求失败后的操作(非必须)

post执行的操作

$ta = function ()

$ = function (fncode, data,

fncode:string functionCode

fnsuccess, fnerror)

data:string 传入的对象参数(非必须)

fnsuccess:function请求成功后的操作(非必须)

fnerror:function 请求失败后的操作(非必须)

$ = function (uicode, host,

uicode:string UI Code

fnerror)

host:

DomStrorJQSelect 填充的对象

fnerror:function 请求失败后的操作(非必须)

$ = function (fncode, data,

fncode:string functionCode

fnsuccess, fnerror)

data:string 传入对象的参数

fnsuccess:function 请求成功后的操作(非必须)

fnerror:function

请求失败后的操作(非必须)

$ge = function

(uicode, host, fnerror)

uicode:string UI Code

host: DomStrorJQSelect

填充的对象

fnerror:function

请求失败后的操作(非必须)

页面跳转

公共方法

$sw. toJsonStr= function (data)

data:Json Json字串

$SON = function (data)

data:

String 要转换的字串

$sw. parseBody = function (data)

data:

String 要转换的字串

$ilverlightInstalled

= function ()

Json转换成字符串

字串转换成Json

只针对转换,ipsa2.0特有格式

$am = function (name)

$am = function (name,

data)

$earchParam = function

(pageindex, pagesize, qvalue,

sortname, sortorder)

$m = function

(enumname)

$mText = function

(enumname, value)

bindEnumData(en, key, value)

enumname:string JS枚举名称

动态获得定义的枚举数据

enumname:string JS枚举名称

动态获得定义的枚举数据,为空时返回''

value:string 值

en:Array 枚举数组

key:string key

value:string value

动态绑定枚举数据

核心插件

value, options)

= function (name,

3.2.5. Ictrcore(控件核心库)

类型

ajax处理

方法

参数说明

ajax:Json ajax设置,包含：{url，data，fnsucess，fnerror}四个对象

url:string请求的地址，此处为Function Code

data:

StringorJson PostData Json字执行ajax操作

说明

执行ajax操作

= function

(ajax)

= function (url,

data, fnsucess, fnerror)

串或Json 对象

fnsuccess:function 请求成功后的操作

fnerror:function 请求失败后的操作

x = function

(ajax, oldajax)

将psa的ajax设置转换为Jquery的Ajax = function

fncode:Function Code

(fncode, postdata, fnsucess,

fnerror)

Json字串或Json 对象

selector:

JQDomorDomStr

选择器对象

css:Json 样式对象

postdata:

StringorJson PostData

设置

设置选择控件弹出层

控件设置

(ctr, selector, css)

ctor = function

ctr:JQDom 控件

loading

modal

g = function

(panel)

gClose =

function (panel)

= function ()

()

panel:JQSelector 需要Loading的区域

panel:JQSelector 需要Loading的区域

页面Loading

remove页面Loading

页面modal

remove页面modal

根据模板数据生成列表Repeat

lose = function

container:

JQuerySelect容器的选择器的字串

template:

DomStrorJQueryIDSelect模板字串

url:

String Function Code

data:

StringorJson PostData json字串或是Json对象

templatelist

= function

(container, template, url,

data, fnsucess,fnerror)

核心插件

tmpl 模板生成

3.2.6. $icontrol(控件库)

类型

初始化

方法

$icontrol = function (panel)

(panel)

参数说明

panel:JQSelect容器的选择器的字串,如：id："#id",tag:"tag"

说明

控件初始化，初始化panel

proInput

完成基础输入控件的统一控制。统一样式设置、取值、赋值等。

$ut = function

panel:JQSelect容器的选择器的字串,如：id："#id",tag:"tag"

repeat

container:

StringorJQSelect容器的选择器的字串

template:

StringorJQIDSelect

根据模板数据生成列表Repeat

$ = function

(container, template,

jsndatas)

模板字串

jsndatas:Json Json格式数据集合

根据模板数据生成列表Repeat

$ = function

container:

JQuerySelect容器的选(container, template, fncode,

择器的字串

postdata , fnsucess, fnerror

)

template:

DomStror

JQueryIDSelect

模板字串

postdata:

StringorJson Post

Data json字串或是Json对象

chooser

options:

Array 设置项

jsndata:json Json格式数据集

初始化选择控件，注：控件设置属性ename，可以读取定义的枚举数据源

初始化选择控件，注：控件设置属性ename，可以读取定义的枚举数据源

$rinit =

function (ctr, options,

jsndata) 合(非必须)

ctr:

DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符

type:string选择控件类型：(下拉选择)，(列表选择)

$r = function

(ctr, type)

$ =

jsndata)

ismulti:bool 是否多选 初始化选择控件使用数据源

function (ctr, type, ismulti,

jsnData:json Json格式数据集合(非必须)

value:string 值

初始化选择控件使用数据源

打开模态窗口

的id

关闭模态窗口

弹出消息方法

$ue =

function (id, value)

(target, id, title, width,

height)

modalwin

$in = function

uicode:string 目标地址

id:string 弹出wintitle:string win的title

id:string 弹出win的id

msg:string 弹出消息

type:string消息类型(非必须)

timeout:number

显示时间

msg:string 确认消息

fnpass:function 通过执行的方法

fncancel:function 取消执行的方法(非必须)

$ =

function (id)

$ = function

(msg, type)

$ = function

(msg, type, timeout)

$m = function

(msg, fnpass, fncancel)

message

弹出消息方法

confirm操作

grid

$ = function

(ctr,options,fncode,postdata,success)

ctr:

DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符

options:array Grid的设置项

fncode:string Function Code

postdata:

StringorJson Post Data

初始化grid

json字串或是Json对象(非必须)

fnsucess:function成功后执行的操作(非必须)

$ =

function (ctr, fncode,

postdata, success)

ctr:

DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符

fncode:string Function Code

postdata:

StringorJson Post Data

json字串或是Json对象(非必须)

fnsucess:function成功后执行的操作(非必须)

grid reload

pager

$ = function

(ctr, totalrecord,

fnpagechanged, options)

ctr:

DomStrorJQSelect触发选择的控件,类型可以为对象也可以为JQ选择字符

totalrecord:string 总记录数

fnpagechanged: function翻页

初始化翻页控件

执行的操作

options:array pager的设置项(非必须)

$ =

function (ctr, pageindex,

fnpagechanged)

翻页控件翻页方法

3.2.7. $ihelper(帮助库)

类型

页面区域生成

$ItemList =

function (id, items, values,

isview)

方法

参数说明

id:string 需要生成区域的ID

items:Json 控件配置项集合

values:

Json 数据值，会根据说明

生成默认控件列表，如查询、编辑、查看

field赋值给控件

isview:bool是否是查看区域

$Item = function

panel:JQDom生成区域

(panel, id, ops, values,

isview)

id:id 控件id前缀

ops:object 控件配置项

values:Json数据值，会根据生成控件项

field赋值给控件

isview:bool是否是查看区域

$ut = function

(input, ops, values)

input:JQDom生成区域

ops:object 控件配置项

values:Json数据值，会根据设置input的属性、样式、值

field赋值给控件

$w = function

(lbl, ops, values)

lbl:JQDom 生成区域

ops:object 空间配置项

values:Json数据值，会根据设置View控件的属性、样式、值

field赋值给控件

$rmat = function

values:Json数据值，会根据(values, ops, isview) field赋值给控件

ops:object 控件配置项

isview:bool 是否是查看区域

设置View控件的属性、样式、值

页面操作

$dalWithKey =

function (key, paramname,

height)

key:object 主键值

paramname:string 参数name

modalid:string Modal窗口的ID

title:string Modal窗口的标题

根据key,打开modal查看窗口

uicode, modalid, title, width,

uicode:string UI Code

$adPage =

function (paramname, fncode,

fninit)

paramname:string参数name

fncode:string Function Code

fninit:function 初始化方法

fncode:string Function Code

searched:JQSelect查询区域选初始化Load的页面

$ = function

(fncode, searchid, gridid)

查询操作，针对grid

择字串

gridid:string Grid选择字串

$it = function

(fncode, paramname, editid)

fncode:

String Function Code

paramname:string 查询区域选择字串

edited:JQSelect 编辑区域选择字串

编辑页面初始化操作

$ = function

(fncode, editid, modalid,

fnsuccess, fnerror)

fncode:String Function Code

edited:JQSelect 编辑区域选择字串

modalid:string modalwin的id

保存操作

$l = function

(fncode, gridid, fnsuccess,

fnerror)

gridid:string Grid的id字串 删除Grid数据

$ = function

(fncode, json, fnsuccess,

fnerror)

json:Json Json参数 删除操作

页面取、赋值

$n = function

(panel)

panel:JQSelect 容器的选择器的字串，如：id："#id",tag:"tag"

获取容器中input的json字串（根据filed属性),panel为空时获取当前页面所有对象

$ue = function

fncode:string Function Code

json字串或是Json对象

panel:JQSelect 容器的选择器的字串，如：id："#id",tag:"tag"

fn:function 赋值完成后的操作,fn(r),r是否成功(非必须)

通过fncode，获取数据，然后绑定到panel(fncode, postdata, panel, fn)

postdata:

StringorJson Post Data

区域对应的控件上

$ckedValue =

split)

container:JQSelect 目标区域选择chkclass:string checkbox样式名

split:string 值之间的分割符(非必获得区域内样式为chkclass选择的checkbox的值

function (container, chkclass,

器

须)

$ioValue =

function (container, name)

container:JQSelect 目标区域选择器

chkclass:string

name:string radio的name

获得区域内属性name='name'选择的radio的值

4. 前台实体设置

4.1. 实体设置

users = {

//基础配置

U_ID: { filed: 'U_ID', type: 'num' }

, U_NO: { field: "U_NO", name: "编号", width: '70px', sort: true, type: 'int' }

, U_Name: { field: "U_Name", name: "名称", width: '60px' }

, U_Birthday: { field: "U_Birthday", name: "生日", width: '70px', sort: true, type: 'date', ctr:'date' }

, U_Salary: { field: "U_Salary", name: "工资", width: '60px', sort: true, type: 'cur', format: 2 }

, U_Type: { field: "U_Type", name: "用户类型",ctr:"ddl",

ctrops:{emptyitem:'select',fncode:'F_Class_GetUserType'} }

, U_Sex: { name: "性别", field: "U_Sex", width: '60px', sort: true, type: 'enum', format: 'gender',

ctr: "list", ctrops: {ename: 'gender'} }

, U_Enabled: { name: "是否有效", field: "U_Enabled", width: '70px', sort: true, type: 'bool',

ctr: "list", ctrops: {ename: 'bool'} }

, U_Desc: { name: "个人描述", field: "U_Desc", width: '100px',

ctr: 'textarea' , ctrprop: {style:'width:350px'}

}

//关联信息配置?

, UT_Name: { field: "UT_Name", name: "用户类型", width: '70px', sortfield: 'U_Type',

sort: true, css: 'center' }

//查询信息配置

, S_U_Sex: { name: "性别", field: "U_Sex",type:'int', ctr: "list",

ctrops: { ismulti: true, ename: 'gender'} }

, S_U_Type: { field: "U_Type", name: "用户类型", type: 'int', ctr: "ddl",

ctrops: { ismulti: true, emptyitem: 'all', fncode: 'F_Class_GetUserType' } }

};

每个EF Entity对应的一个设置实体。格式如下：

Entity定义名称 = { Entity字段属性名:{属性设置}}；

4.2. 属性说明

4.2.1. 属性说明列表

属性类型

设置属性

name

type

属性

field

类型

String

String

String

Number|String

String

String

String

String

Array

Number|String

Bool

Array

String

Bool

String

显示名称

描述

字段名，必须属性，与EF实体字段名称一致

数据类型，非string类型的都需要设置，为空时默认按字符处理。系统也会根据type进行格式设置，但css属性的优先级更高。

数据格式，与type配合使用

自定义样式名

控件id命名,id为空时,默认取field属性值，控件的ID全称是txt_format

css

控件属性

验证配置

列表Columns属性

id

ctr

ctrops

ctrprop

value

valid

validops

width

sort

sortfield

区域名称_id

控件类型

JQ控件设置,ctrops: { ismulti: true, emptyitem: 'all',

fncode: 'fn_xxx' }

控件属性设置如：ctrprop: {style:'width:350px'}

初始化控件的值,在没有数据绑定时生效(编辑模式)

是否验证

验证设置

列表宽度

是否排序

排序字段，与EF实体字段名称一致。不设置时，默认取field属性

4.2.2. 属性定义值说明

1) ctr（控件类型）

ctr

公共

textarea

ddl

list

Style

Css

Value

emptyitem

ename

ismulti

fncode

子属性

公共的子属性

样式设置

样式名

默认值

textarea多文本控件

下拉选择

说明

ename

ismulti

fncode

2) type&format

Type

默认（不设置）

int

num

cur

date

datetime

bool

enum

Number：小数位数

Number：小数位数

String：如：yyyy-MM-dd

String：如：yyyy-MM-dd hh:mm:ss

Bool: 是否是Html格式显示

String：枚举名称

Format

默认为Text处理

整数

数字

货币

说明

日期类型，自定义的日期格式，系统会控制通用的，如非特殊要求，不用设置

日期时间,自定义的日期时间格式，系统会控制通用的，如非特殊要求，不用设置

布尔

枚举类型;定义在$中

3) css（自定义样式）

系统自带样式列表：

类型

Grid

left

right

center

值

定义在grid中的样式

说明

4) validops（验证属性）

类型

required

range

Bool

Array[2]

类型

是否验证非空

说明

范围验证，字符为长度，数字为大小，日期为范围，例：range: [3,

20]

规则验证，包括email、url、onlyletter、noSign以及上传文件的img、doc类型文件。

自定义正则验证，custrule:[ '^[0-9]+(.[0-9]{0,[p]})?$'

, "The Rule is error."]

自定义function验证, custfn: [function (ctr, value)

rule String

custrule Array[2]

custfn Array[2]

{ return checkpsd(value) }, "The Two Password is not

equal!"]}

5. 页面实例

5.1. 基础场景

5.1.1. 主页面

参考页面：TestXieli_

5) 引用

 样式引用

使用样式的统一出口文件

 核心JS库引用

 插件库的引用

 控件库和页面帮助库的引用

 系统业务库的引用

 初始化脚本

6) 公共元素