• 基本列表示例

    源码

    <ul id="test65" cmd-select="Demos_List" class="hide">
     <li><a><i>{{csrq}}</i>{{xm}}</a></li>
    </ul>


    是的 就是这么简单! 给 ul 一个页面唯一的ID ,配置一个cmd-select获取数据的命令 li 就是HTML模板 随便写 默认的hide样式是隐藏 因为页面没有加载完成时 用户可以看到li里面的HTML模板 不太友好 所以默认隐藏 加载完成后 会自动显示。

  • 产品列表示例

    源码

    <ul id="test65" cmd-select="Demos_List" class="hide listdemo1">
     <li><a><img src="{{tx}}" />{{xm}}</a></li>
    </ul>


    HTML随便定义,CSS随便定义。

  • 基本表格示例

    示例

    源码

    <script type="text/javascript">
        function beforerenderrow(datai) {

            //单条渲染前回调函数 参数为本条记录 此函数主要功能为转换数据字典 转换后的值可以自定义名称 不冲突即可
            datai.xbInfo = zjs.getvals("sex", datai.xb);

            //目前我只转换了性别字段 其他字段还忘同学们自行研究
        };
    </script>

    <!--

    表单的id为关键点 取值是 主表格ID + Paras  表示此表单为主表格的搜索条件区域 此表单中input的id对应表格中字段名 即可搜索

    当表格数据少于前端缓存量(目前设置为200条)时 使用前端搜索模式 数据量大于缓存量时切换为服务器端搜索模式

    文本框输入800毫秒延迟自动搜索 选择器类字段即时生效

    -->
    <form id="DemossParas" class="cform" onsubmit="return false;">
        <table border="0" cellpadding="0" cellspacing="12">
            <tr>
                <td>姓名:</td>
                <td>
                    <input id="xm" type="text" /><!-- input的ID对应字段名 --></td>
                <td class="button">

                    <!-- 查询按钮勾子关键ID id="search" -->
                    <a id="search" class="a_all"><i class="icon-search f18"></i><span>查询</span></a>

                    <!-- 添加按钮勾子 add=添加页面的路径 添加按钮会调用弹窗 当弹窗关闭后 会自动将新增的数据 回传至表格中 -->
                    <a class="a_all" href="javascript:void(0);" add="/100/"><i class="icon-plus-sign"></i><span>添加</span></a>
                </td>
            </tr>
        </table>
    </form>

    <!-- 主表格 ID请保证页面唯一 关键属性

    cmd-select为获取表格数据的命令

    idkey为主键字段对应绑定到tr的id字段上 用于删除DOM

    beforerenderrow渲染单条回调函数 此函数用于转换数据字典 或者其他自定义动作 -->
    <table id="Demoss" class="ctable" border="0" cellpadding="0" cellspacing="0"
        cmd-select="Demos_List" idkey="ID" beforerenderrow="beforerenderrow()">
        <thead>
            <tr class="trth">
                <td>编号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>出生日期</td>
                <td>所在地</td>
                <td>头像</td>
                <td>学历</td>
                <td>兴趣爱好</td>
                <td>喜欢章节</td>
                <td>打分</td>
                <td class="w12">操作</td>
            </tr>
        </thead>
        <tbody style="display: none;">

            <!-- 行必须样式uls 行主键字段id -->
            <tr class="uls" id="{{ID}}">
                <td>{{ID}}</td>
                <td>{{xm}}</td>
                <td>{{xbInfo}}</td>
                <td>{{csrq}}</td>
                <td>{{szd}}</td>
                <td><!-- 数据绑定方式可以随意 字段可以绑定到任意位置 比如图片的src 或者直接输出文本 -->
                    <img src="{{tx}}" style="width: 24px; height: 24px;" /></td>
                <td>{{xl}}</td>
                <td>{{xcah}}</td>
                <td>{{xhzj}}</td>
                <td><!-- 星星展示方式 star1 2 3 4 5为对应的星星 -->
                    <div class="starshow star{{df}}"></div>
                </td>
                <td class="tbody_btns">

                    <!-- 修改按钮关键勾子 update=修改文件路径 一般和新增是共用页面 但要多传本条数据的主键字段过去

                           .htm为伪静态 规则为/页面编号_主编号.htm-->
                    <a class="btn" update="/100_{{ID}}.htm"><i class="icon-file-text"></i>修改</a>

                    <!-- 删除命令关键点delete=命令名 deleteid为参数主键ID -->
                    <a class="btn" delete="Demos_Remove" deleteid="{{ID}}"><i class="icon-bitbucket"></i>删除</a>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="100">
                    <div class="fr">
                        <table border="0" cellpadding="0" cellspacing="0">
                            <tfoot>
                                <tr><!-- 用于显示行数的关键勾子样式TotalRows -->
                                    <td>共 <span class="TotalRows">0</span> 条</td>

                                    <!-- pagesize页容量关键字段 可以自行增加option  -->
                                    <td>每页显示<select id="pagesize"><option>10</option></select>条</td>                               

                                    <!-- 当前页码关键勾子样式 PageIndex  -->
                                    <td>第 <span class="PageIndex">1/1</span> 页</td>

                                    <!-- 上一页命令关键勾子样式 prevPage-->
                                    <td><a href="javascript:void(0);" class="prevPage btn"><i class="icon-chevron-left"></i></a></td>

                                    <!-- 页码容器关键勾子样式 pageNumbers-->
                                    <td class="pageNumbers"></td>

                                    <!-- 下一页命令关键勾子样式 nextPage -->                                

                                    <td><a href="javascript:void(0);" class="nextPage btn"><i class="icon-chevron-right"></i></a></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>


    关于弹窗内的添加页面的示例 请参见《6.2 表单》

  • 校验规则

    实例

    姓名:
    新密码:
    确认密码:

    表单验证组件是结合cfrom使用的,常用的表单验证有是否为空、格式等等。就是在cfrom里面的文本框加上rule属性即可。

    源码

    <table border="0" cellpadding="0" cellspacing="12">
    <tr><td class="ws">姓名:</td><td><input id="xm" type="text" rule='required;length:50'/></td></tr>
    <tr><td>新密码:</td><td><input id="Password" type="text" rule="required;length:50"/></td></tr>
    <tr><td>确认密码:</td><td><input id="Password2" type="text" rule="required;length:50;equals:Password"/></td></tr>
    </table>

    rule的语法是多个验证规则以分号“;”分割,每个规则的参数之间以冒号“:”分割。

    目前支持的验证规则有:

    required 必填

    equals 对比 比如2次密码

    gt 大于

    lt 小于

    length 长度 :分割值

    phone 电话

    email 邮箱

    integer 整数

    zinteger 正整数

    number 数字

    znumber 正数字

    date 日期

    ipv4 IP地址

    url 超链接

    code 身份证号

    money 金额

    其他规则 请开发者自行在 m.cselector.config.js 中添加 一般规则都是基于正则表达式

  • 基础示例

    示例

    源码

    <script src="/js/m.cselector.citys.js"></script><!-- 外部引用 城市选择器 -->

    <script src="/js/kindeditor/kindeditor-min.js"></script><!-- 外部引用 文本编辑器 -->

    <script src="/js/p.WdatePicker.js"></script><!-- 外部引用 日期选择器 -->

    <!-- 关键属性 单条查询 修改 新增 3个命令 -->

    <form id="DemosAdd" cmd-select="Demos_Query" cmd-update="Demos_Modify" cmd-insert="Demos_Add">
        <input id="ID" type="hidden" />
        <table border="0" cellpadding="0" cellspacing="12" class="c12">
            <tr>
                <td class="ws">姓名:</td>
                <td class="w4"><!-- id对应字段名 rule为表单检验 格式为多规则以;分号分割 规则多值以:冒号分割 具体请参见《6.3 表单检验》 -->
                    <input id="xm" type="text" rule="length:25;required;" /></td>
                <td class="ws">性别:</td>
                <td><!-- cselectorRadio为单选选择器 mode为性别字典 字典的值为 zjs.sex = '1|男,2|女'; -->
                    <input id="xb" type="text" class="cselectorRadio" mode="sex" /></td>
            </tr>
            <tr>
                <td>喜欢章节:</td>
                <td><!-- cselectorCheckTree为下拉复选树 cmd-select为获取树数据的命令 idkey为主键字段 pidkey为父键字段 template为模板 -->
                    <input id="xhzj" type="text" class="cselectorCheckTree" mode="" cmd-select="nColumn_SelectAll"
                        idkey="ID" pidkey="PID" template="<li><a value='{{ID}}'>{{Name}}</a></li>" /></td>
                <td>打分:</td>
                <td><!-- cselectorStar为星星选择器 1-5星 -->
                    <input id="df" type="text" class="cselectorStar" /></td>
            </tr>
            <tr>
                <td>所在地:</td>
                <td><!-- cselectorCity城市选择器 more="true"为显示完整路径 比如金水区 显示为 河南省-郑州市-金水区  -->
                    <input id="szd" class="cselectorCity" more="true" /></td>
                <td>出生日期:</td>
                <td><!-- WdatePicker日期选择器 -->
                    <input id="csrq" type="text" onclick="WdatePicker()" /></td>
            </tr>
            <tr>
                <td>头像:</td>
                <td><!-- cselectorImageUpload文件上传组件 -->
                    <input id="tx" type="text" class="cselectorImageUpload" /></td>
                <td>学历:</td>
                <td><!-- cselector下拉选择器 mode为学历字典 字典值为 zjs.xl = "0|大专以下,1|大专,2|本科,4|硕士,5|博士,6|博士后,"; -->
                    <input id="xl" type="text" class="cselector" mode="xl" /></td>
            </tr>
            <tr>
                <td>兴趣爱好:</td>
                <td colspan="11"><!-- cselectorCheckBox复选选择器 -->
                    <input id="xcah" type="text" class="cselectorCheckBox" mode="xcah" /></td>
            </tr>
            <tr>
                <td>个人简介:</td>
                <td colspan="11"><!-- ceditormin为简易版文本编辑器 ceditor为完整版文本编辑器 简易版的给普通用户 完整的给后台管理员 -->
                    <textarea id="grjj" class="ceditormin h2" rule="length:250;"></textarea></td>
            </tr>
            <tr>
                <td></td><!-- id="submit"为提交按钮的关键勾子 注意不是input type="submit" 而是id 只认id -->
                <td><a id="submit" class="btn">提交</a></td>
            </tr>
        </table>
    </form>

    示例介绍:


    id
    表单的ID 必须保证页面中唯一
    cmd-select
    表单的查询命令
    cmd-update
    表单的更新命令
    cmd-insert
    表单的插入命令
    input的id
    对应的字段名
    input的rule
    字段的校验规则
    id="submit"
    提交按钮的关键钩子
  • 配置项

    uiZjs的config文件为公共的配置项,具体列表如下:
    配置项

    zjs.cmdurl
    默认命令指向地址 .NET使用统一命令转发模式 JAVA使用直接转发模式时此项为空
    zjs.fileurl
    文件上传地址
    zjs.meitu
    启动美图秀秀编辑模式 美图API所在文件位置
    zjs.meitudomain
    传给美图的本站域名 不用带项目名 用于拼接图片完整路径
    zjs.meitufileurl
    传给美图的本站文件上传路径 用于美图回传图片的地址
    zjs.cmdtype
    默认命令以POST方式处理
    zjs.cachePage
    表格默认缓存页数 100页 设置为1即可不缓存
    zjs.isredirect
    是否有伪静态 有伪静态时需要处理参数 没有就不需要处理
    zjs.treeroot
    树根节点默认值 .NET里用的是0 JAVA用的是1 特殊的用的是null
    zjs.rootdir
    静态资源根目录
    zjs.cmddir
    命令拼接目录 JAVA一般为目录名
  • 常用字典

    uiZjs中下拉类控件的值都是以字典的形式出现的,字典的格式为"0值|1文本,0值|1文本",比如:1|男,2|女
    值也可以省略,省略后表示值和文本一样,比如:瘦,较瘦,匀称,苗条,高挑,丰满,健壮,魁梧,胖,较胖  或者  是,否
    uiZjs提供了一些默认的字典,其他的字典可以根据业务系统需要自行添加,默认字典如下:
    字典

    是否
    zjs.yesno = '是,否';
    性别
    zjs.sex = '1|男,2|女';
    婚姻状况
    zjs.hyzk = "未婚,已婚,离异,丧偶,";
    政治面貌
    zjs.zzmm = "党员,群众,其他";
    血型
    zjs.xxxx = "A型,B型,O型,AB型,其他";
  • 常用正则表达式

    uiZjs中表单校验使用正则表达式,默认也提供了一些常用的正则,其他的根据业务系统自行添加。

    介绍
    示例
    必填
    required
    rule="required"
    比较
    equals
    rule="equals:password1"
    长度
    length
    rule="length:40" 或 rule="length:40:2"
    手机号
    phone

    整数
    integer
    /^[\-\+]?\d+$/
    IP地址
    ipv4

    身份证号
    code

    金额
    money
    /^\d{1,10}(?:\.\d{1,2})?$/
    邮箱
    email

    网址
    url

  • uiZjs项目结构

    ┌─font-awesome                 
    │  └─css
    │          font-awesome.min.css                    字体图片文件夹 内含font-awesome和iconfont两套图标
    ├─fusioncharts
    │      fusioncharts.js                             图表系统 常用柱状图 饼状图等
    ├─img                                             常用图片素材目录
    ├─js
    │  │  laycolor-min.css                            色彩配置样式表文件
    │  │  layout.m.css                                主样式表文件
    │  │  layout.p.css                                PC专用的样式表文件 移动端开发时不需要引用
    │  │  m.controller.js                             移动端控制器
    │  │  m.cselector.1.0.js                          uiZjs主文件
    │  │  m.cselector.citys.js                        城市选择器插件
    │  │  m.cselector.config.js                       uiZjs配置文件
    │  │  m.cselector.js                              uiZjs主文件编译版
    │  │  m.zepto.1.1.6.js                            zepto文件 内含 touch evalJSON animate插件
    │  │  p.cselector.plugins.js                      PC端扩展插件 内含lhgdialog对话框 城市选择器等
    │  │  p.jquery.1.7.2.js                           jQuery文件 内含 evalJSON
    │  │  p.jquery.event.drag-1.5.min.js              拖拽插件
    │  │  p.jquery.jscolor.js                         颜色选择器插件
    │  │  p.WdatePicker.js                            my97日期选择器插件
    │  │
    │  └─kindeditor
    │          kindeditor-min.js                       kindeditor文本编辑器插件
    └─mobile                                          移动端开发的HTML模板目录
  • uiZjs数据结构

    uiZjs采用统一的数据交互方式,任意一个命令的返回都需要套一层系统参数,比如:

    {"ResponseID":0,"Message":"操作成功!","Data":{}}

    参数名

    介绍

    ResponseID

    执行结果 0表示成功 其他失败

    Message

    提示语 如添加成功 变更成功 等 返回列表时 可为空

    Data

    参数内包含返回的具体业务数据  参见 [业务参数介绍]

    其实Data字段表示业务数据,在单条时可以直接返回任意对象。列表时需要返回一个固定对象,比如:

    {"ResponseID":0,"Message":"","Data":{
     "Datas":[{"ID":"5618","Title":"测试产品"},{"ID":"5619","Title":"测试产品1"}],
     "TotalRows":2,
     "TotalPages":1 }
    }

    参数名

    介绍

    Data

    具体数据列表[]数组格式内含对象

    TotalRows

    总行数

    TotalPages

    总页数

  • 公共事件属性

    HTML本身有很多属性,同时也支持自定义属性,比如:

    <div id="site-left" aa="bb" cc="dd"></div> 或 <a onclick="alert(ok)" onaa="alert(error)">提示</a>

    同时JQuery有一个attr方法,可以取到元素的任意属性的值,比如$("#site-left").attr("aa")就可以取到bb了。基于这种方式我们可以在HTML元素上附加更多的信息,这些在uiZjs里使用了很多。大概分为值属性和事件属性,下拉列表框、下拉复选模式、下拉树、下拉复选树、单选按钮组、复选按钮组、星级选择器统称为下拉类控件。
    具体列表如下:
    事件属性
    描述
    callback
    当出现在openurl时 表示窗口关闭后的回调函数名 比如:
    <script type="text/javascript">
    function orderchange($t){//$t为默认返回参数 参数值为当前这个a元素
      alert( "这是一个JS函数,参数里的$t是a元素,我们要看一下a的openurl属性值为:"+$t.attr("openurl") );
    };
    </script>
    <a openurl="a.html" callback="orderchange()">修改</a>
    当出现在cselectorImageUpload时 表示文件上传后的回调函数
    当出现在execcmd时 表示命令执行完成后的回调函数
    beforesubmit
    在图片上传控件的文件上传之前调用 用于自定义打包数据
    bindcallback
    在图片上传控件变形后的回调
    OtherInfo
    在图片上传控件上传完成后 如果返回的有额外信息 比如文件名 文件大小 配置此回调
    conbind
    在下拉类控件变形后的回调
    conbefore
    下拉类控件的项点击时的前置回调 参数有三个($t,$input,$id)
    conchange
    下拉类控件的项点击后的回调 参数有三个($t,$input,$id)
  • 表格事件属性

    事件属性
    描述
    callback
    表示在表格的数据从服务器端 返回后并且渲染前 的回调函数
    beforerender
    表示在表格的数据每页渲染前 的回调函数 用于字典转换或数据预处理
    beforerenderrow
    表示在表格的数据每页每行渲染前 的回调函数 参数为单行对象 用于字典转换
    afterrender
    表示在表格的数据每页渲染后的回调
    getcallback
    表示在表格的数据从服务器端 返回后并且渲染后 的回调函数
  • 表单事件属性

    事件属性
    描述
    beforerender
    表示在表单的数据渲染前 的回调函数
    getcallback
    表示在表单的数据从服务器端 返回后并且渲染后 的回调函数
    setcallback
    表示表单在提交后 的回调函数 最常用的就是setcallback="close()" 提交后关闭弹窗
    beforesubmit
    表单提交前的回调函数 此函数必须有返回值 true或false
    checkcallback
    在表单项的验证通过后 会调用此函数 并且此函数的返回值将决定是否通过检验 这个属性用于增加自定义复杂检验
  • 公共值属性

    备注:下拉列表框、下拉复选模式、下拉树、下拉复选树、单选按钮组、复选按钮组、星级选择器统称为下拉类控件
    公共值属性
    描述
    mode
    字典名称 比如sex ordertype
    values
    自定义字典 直接设置字典值 比如1|男,2|女
    showother
    下拉类控件里是否显示其他 显示其他后 就可以让用户自由输入 比如 显示 男女___其他
    onlyshow
    下拉类控件默认点击后会隐藏项 配置onlyshow后可以不隐藏 用于实现一些一直显示的树
    isinput
    下拉类控件启动可输入搜索模式
    ispanel
    下拉类控件启动面板选择模式 面板选择会多一个ABCD~XYZ的选择器
    isall
    下拉类控件启动 全选/不全选 模块
    cmd-select
    下拉类控件绑定字典项分为2种模式
    一种是固定值 一种是动态的值 比如下拉列表中选择系统内用户列表 那就需要获取 配置cmd-select就是下拉框的获取数据的命令 给下拉框提供的数据和表格类默认数据结构一样
    parentKey
    启动数据缓存模式 parentKey为缓存的变量名 数据会缓存到top[parentKey]中 比如一个页面中有一个表格 里面需要用到10行记录 10个选择人员 配置相同的parentKey后 只有第一个人员列表从服务器返回 其他直接从缓存中读取
    urlpara
    配置下拉类控件获取数据命令时附带URL中的参数
    paras
    配置下拉类控件获取数据命令时附带的固定参数 和URL的格式一样 比如:paras="a=1&b=2&c=3"
    updatewait
    更新等待模式 就不发起命令 这种情况出现在 添加时加载默认列表 修改时 要根据参数获取列表
    prevtemplate
    下拉类控件前置的HTML内容 可任意配置
    jsontree
    启动JSON树数据结构模式 默认为平级结构 用JS递归为树 如果服务器返回的就是树 就启动JSON树模式
    template
    树节点的模板 正常的为<li><a>{{title}}<a></li> 模板中{{}}为绑定数据变量 需要根据自己的数据结果绑定
    idkey
    平级结构表示关键ID的字段名 比如idkey="id"
    pidkey
    平级结构表示父关键ID的字段名 比如pidkey="parentid"
    dateformat
    日期格式化 只有 i 标签生效 格式为yyyy MM dd hh mm ss
    execcmd
    给a配置执行命令
    paras
    execcmd命令附带的参数 以URL参数格式 比如paras="a=1&b=2&c=3"
    confirm
    execcmd命令执行时的提示 比如confirm="确认要删除吗"
    target
    execcmd命令执行成功后要跳转的地址
    refresh
    execcmd命令执行成功后刷新本页面
    delete
    execcmd命令执行成功后删除父.uls元素
    图片选择器相关

    href
    上传接收端路径 默认读zjs.fileurl的config 特殊的单独配置此属性
    btnmsg
    上传按钮的文字 默认为选择上传
    noextension
    忽略上传控件的格式限制
    extension
    指定可上传文件格式 以,号分割 比如 jpg,png,gif
    lock
    上传时锁屏
    file
    启动文件模式 默认为图片模式 上传后显示图片 文件模式上传后显示文件名
    幻灯片相关

    maxshow
    最大同时显示的缩略图数量 自己按照宽度计算
    fixed
    固定高度 DIV本身有高度时配置此属性
    full
    强制幻灯片宽高相同
    half
    强制幻灯片高=宽除2
    thumbnail
    启用幻灯片的缩略图
    fadein
    默认幻灯片为左右滑动 fadein为淡入淡出
  • 表格值属性

    表格中值属性
    描述
    cmd-select
    最常用的属性 配置表格或表单的查询命令
    pullToRefresh
    手机端启动下拉刷新模式 这种模式像朋友圈一样 一直向下加载 不清除前一页 同时监控滚动条 当到页面底部时自动触发
    notscroll
    在下拉刷新模式下 不想监控滚动条事件时配置notscroll="true"
    scrollToRefresh
    PC端启动下拉刷新模式 和手机端差别在于会生成页码 手机端不需要页码
    lockhead
    锁上表头模式
    donotsearch
    表格加载时不请求数据
    idkey
    表格的主键字段
    nomsg
    禁用未搜索到相关结果的提示语
    associate
    启动联想模式 联想模式下未搜索到相关结果时自动还原默认数据
    onlyserver
    强制服务器端搜索模式 否则uiZjs会自动切换前端搜索模式和服务器端搜索模式
    searchtype
    搜索模式 取值为equals(完全相等) between(区间)in(范围)其他值(模糊匹配)
    between
    配合区间搜索模式 表示区间结束 between的值为区间开始
    比如<input id="ordertime" searchtype="between" /> ~ <input between="ordertime" />
    isnumber
    配合区间搜索模式 表示区间值为数值型 默认为字符型
    validatorparas
    启用查询检验 默认查询时不检验参数必填 启用后将检验表格参数区域的rule
    clearurlpara
    清空URL里的参数 默认会将URL的参数带到命令里
    paras
    传输自定义参数
    contentType
    出现在表格时是查询命令的contentType 默认为form
    dateformat
    处理日期时间的格式 默认为yyyy-MM-dd
    lockall
    上左双锁表头模式
  • 表单值属性

    表单中值属性
    描述
    cmd-select
    最常用的属性 配置表格或表单的查询命令
    cmd-insert
    执行新增时的命令
    cmd-update
    执行修改时的命令 切换新增/修改模式的根据为 URL里是否传ID
    message
    表单项默认提示语 比如 请输入用户名
    lengthspan
    字数检验时用于放置提示语的容器 JQUERY语法 比如 #message或 .message
    lengthvalue
    可输入最大值
    error
    检验失败时自定义提示语 默认有提示语 比如*必填
    success
    检验成功的提示语 一般不设置
    rule
    检验规则 具体规则请参见《表单检验》
    nokeydown
    禁用回车切换焦点
    istemplate
    启动前台展示模式 表单在前台展示模式中和表格的模板一样 不可以使用cmd-insert和cmd-update
    allcmds
    默认只有在URL里有id参数时才会发cmd-select命令 allcmds强制每次都发
    scontentType
    表单查询时的contentType
    contentType
    表单执行新增和修改时的contentType
    target
    表单保存成功后跳转路径
  • 刷新下拉列表的值

    概述

    刷新下拉列表的值,需要先获取下拉框这个对象,获取方式为 window.表单ID + "_" + 文本框ID。

    比如 下面这个表单中的性别选择器的勾子名称为window.sUserAdd_xb

    <form id="sUserAdd">
    <table border="0" cellpadding="0" cellspacing="12" class="c12">
        <tr>
            <td>性别:</td>
            <td>
                <input id="xb" type="text" class="cselector" mode="xb"/></td>
        </tr>
    </table>
    </form>

    使用方法

    使用勾子对象的refresh函数,此函数没有参数,所以需要自行处理更换逻辑,再调用此函数。比如

    function aa(){

     $("#xb").attr("mode","yesno");

     window.sUserAdd_xb.refresh();

    }

  • zjs.cform

    概述

    zjs.cform有两种用法,一种用于添加、修改之类的后台管理。一种用于表单渲染前台显示。一般不需要手动调用,uiZjs会自动调用此函数。但是有些特殊API可能会使用到,zjs.cform的主要勾子是以form表单的id访问此表格对象,规则为window.cform+表格ID。比如<form id="productinfo"…… 那么此表格的对象名称为window.cformproductinfo,使用对象名称,可以访问到对象的属性和方法。比如获取表单当前要显示的数据对象、手动调用表单检验等等。

    属性

    使用对象名称 如window.cformproductinfo可以访问到对象的所有属性,具体属性如下:

    属性名称
    属性意义
    window.cformproductinfo.Data
    当前表单将要渲染的数据对象,返回一个对象 如{"name":"姓名","sex":1}

    方法

    使用对象名称 如window.cformproductinfo可以访问到对象的所有方法,具体方法如下:

    属性名称
    属性意义
    参数
    window.cformproductinfo.search
    发起搜索
    searchpara 为对象类型的参数 本身可带多值 比如{"id":"1","name":"张三"}
    window.cformproductinfo.render
    重新渲染表单

    无参数 需要先调用.Data给表单数据重新赋值 然后直接调render即可

    比如:

    window.cformproductinfo.Data={"id":"2","name":"李四"};

    window.cformproductinfo.render();

    window.cformproductinfo.validator
    检验表单元素
    无参数 返回值为true或false 表单内所有元素都通过rule检验就返回true


    事件

    zjs.cform提供了几个常用事件,比如渲染前/后,如果需要使用请在form标签里增加对应事件的处理函数,具体方法如下:

    事件名称
    事件意义
    示例
    beforerender
    渲染前事件 比如在渲染前需要处理 一些字典转换

    <script type="text/javascript">

    function mybeforerender(){//自定义函数

    for循环window.cformproductinfo.Data此变量 处理某一个字段值 此处不再详述

    };

    </script>

    <form id="productinfo" beforerender="mybeforerender()" ……

    getcallback
    渲染后事件

    setcallback
    点击提交按钮 返回成功后执行的事件 一般用于关闭对话框等 *注close()为公共关闭对话框函数
    <form id="productinfo" setcallback="close()"




  • zjs.ctable

    概述

    zjs.ctable是表格渲染用的函数,但是一般不用调用,uiZjs会自动调用此函数。但是有些特殊API可能会使用到,zjs.ctable的主要勾子是以table表格的id访问此表格对象,规则为window.ctable+表格ID。比如<table id="productlist"…… 那么此表格的对象名称为window.ctableproductlist,使用对象名称,可以访问到对象的属性和方法。比如获取表格当前要显示的数据集合,获取表格数据集的总行数,总页数等等。

    属性

    使用对象名称 如window.ctableproductlist可以访问到对象的所有属性,具体属性如下:

    属性名称
    属性意义
    window.ctableproductlist.Data
    当前页将要渲染的数据集合 是一个数组 *注 仅当前页的数据
    window.ctableproductlist.Datas
    当前表格内缓存的所有数据,默认uiZjs会缓存100页数据,供前端翻页的搜索
    window.ctableproductlist.Datas1
    扩展项 如果表格带回来的数据集多于1个 会存在此处 供自定义处理
    window.ctableproductlist.Datas2
    扩展项 同上 场景比如 设置用户权限 返回的Datas为所有权限 Datas1为当前用户权限 自定义处理时 就可以使用Datas1对比Datas 而判断用户对应的权限要显示增加或者删除按钮
    window.ctableproductlist.TotalRows
    表格的总行数
    window.ctableproductlist.TotalPages
    表格总页数

    方法

    使用对象名称 如window.ctableproductlist可以访问到对象的所有方法,具体方法如下:

    属性名称
    属性意义
    参数
    window.ctableproductlist.dosearch
    发起搜索 如果数据都在前端 就在前端搜索 如果不是 就发到服务端处理

    window.ctableproductlist.search
    强制直接发起服务器端搜索
    searchpara 为对象类型的参数 本身可带多值 比如{"id":"1","name":"张三"}


    事件

    zjs.ctable提供了几个常用事件,比如渲染前/后,如果需要使用请在table标签里增加对应事件的处理函数,具体方法如下:

    事件名称
    事件意义
    示例
    beforerender
    渲染前事件 比如在渲染前需要处理 一些字典转换

    <script type="text/javascript">

    function mybeforerender(){//自定义函数

    for循环window.ctableproductlist.Data此变量 处理某一个字段值 此处不再详述

    };

    </script>

    <table id="productlist" beforerender="mybeforerender()" ……

    getcallback
    渲染后事件




  • zjs.getvals

    zjs.getvals为字典代码转换为值的函数,上一章里提到uiZjs提倡使用字典定义key/value的数据,那么key/value的转换就是由zjs.getvals函数处理的。

    概述

    zjs.getvals为字典代码转换为值的函数,上一章里提到uiZjs提倡使用字典定义key/value的数据,那么key/value的转换就是由zjs.getvals函数处理的。

    参数

    zjs.getvals有二个参数,参数如下:

    属性名称
    属性意义
    必传
    codename
    字典名称 比如 sex yesno 不需要带zjs.

    value
    要转换的值 比如1 2

    返回值

    返回值 为转换好的字符串 比如 男 女 是 否

    示例

    zjs.sex = "1|男,2|女";
    alert(zjs.getvals("sex","1"));

    执行一下试试


继续阅读

    uiZjs