Web应用开发其它前端控件的详细介绍(八).doc

为合作伙伴创造价值表单验证表单的class类需要加上ui-from，否则无法执行本验证方法，验证的属性参数需要填写在对应表单控件html标签上。data-checked默认选择项说明：让表单对应默认选择项与程序数据一致，用于radio、checkbox、select，其中data-checked里面的值为对应选项的值。支持类型：radio、checkbox、select示例代码：radio示例：1选项一2选项二3选项三注意：请将data-checked放在第一个radio上面。checkbox示例：1选项一2选项二3选项三注意：1、data-checked里面的值如果有多个被选中，将对应的值用竖线|划分开来即可。2、本表单UI支持同name的checkbox，提交后会自动处理为：值|值|值.的格式，程序只需要以|拆分为数组即可获得对应值。select示例：12请选择3选项一4选项二5选项三6placeholder预设文字说明：输入框提示文字，为空时显示，输入文字后消失。示例：1支持类型：input,textarea（非编辑器）data-required不能为空说明：输入框或选项的值不能为空，为空则提示报错并无法提交表单。示例：1支持类型：input,textarea（非编辑器）,radio,checkbox,select注意：radio和checkbox请把属性添加到第一个选项标签上data-errortxt错误提示说明：自定义错误提示，可以不设置，不设置则采用默认文字示例：1支持类型：input,textarea（非编辑器）,radio,checkbox,selectdata-size字数限制说明：限制输入框的文字字数，支持限制最小、最大和限制字数范围。支持类型：input,textarea限制最小：数值-min 如：3-min示例：1限制最大：数值-max 如：100-max示例：1限制范围：数值-数值 如：3-18示例：1data-mobile手机号码说明：验证输入的值是否为手机号码（11位1开头的数字），如果不是则提示报错信息并无法提交表单。示例：1支持类型：inputtextdata-email邮箱地址说明：验证输入的值是否为邮箱地址示例：1支持类型：inputtextdata-password重复输入密码说明：用于重复输入密码时验证是否一致，其中data-password里面的值应该为首次密码输入框的name名称。示例：12支持类型：inputtype=passworddata-ajaxcheck-urlAJAX验证说明：可以无刷新验证输入框信息，一般用于验证用户名是否被注册，如果有误则会禁止表单提交。需要与链接数据库查询，通过get方式传递参数到指定动态页面。data-ajaxcheck-url里面的值应该为动态页面的路径。示例：1注意：input标签的name和value会自动带入，因此URL内无需填写input属性。返回值说明：该URL动态页面经过处理后，需要回传处理结果，格式应该为：echo 结果|提示文字。结果为0或1，0为不成立，1为成立。处理的结果会影响页面提示文字，0则提示错误，1则提示正确。竖线后面的文字则是提示文字。示例：（部分PHP代码）1functionau()2.3.4if($user)5echo1|恭喜！该帐号没有被注册！;6else7echo0|抱歉！该帐号已经被注册！;89支持类型：inputtype=textdata-norepeat不允许重复值说明：可以在表单中设定多个不允许出现重复值的输入框，在提交表单时候就会进行验证。data-norepeat里面的值自定义，需要与其匹配验证是否重复值的其它输入框的值必须一致。示例：12支持类型：inputtype=textdata-confirm确认说明：通常设置在链接或按钮上，点击后不会马上执行链接跳转或相应的提交，而是提示一段文字后让用户决定是否继续，比如“你确定要这样做？”，该属性里面的值为提示文字。示例：1删除支持类型：a、inputtype=submitdata-custom自定义验证说明：如果本表单验证无法满足你的验证需求，你可以通过这个方法自定义验证。其中data-custom的值为布尔值true则验证成功，false则验证失败，可以填入JS函数名称或可执行的JS代码，通过return返回布尔值的方式传递是否验证成功。示例：1JS代码：1function testfunc(my)2var t = false;3if(my.val()=456)4t = true;56return t;7注意：自定义验证的同时也需要自定义错误文字data-errortxt支持类型：input、textarea、radio、checkbox、select表格数据获取说明：最基本的表格数据展示功能，自动实现无刷新分页。HTML代码结构：0102030405排序06标题07前台08推荐09置顶10更新时间1112131415161718排序19标题20前台21推荐22置顶23更新时间24252627注意：class类要一样，尤其ui-table，是激活控件的class类PHP代码示例：01functiondotable_list_json()02global$_M;03$table= load:sys_class(tabledata,new);/加载表格数据获取类04$where=lang=$_Mformlang;/查询条件05$order=no_order;/排序方式06$array=$table-getdata($_Mtablenews,*,$where,$order);0708foreach($arrayas$key=$val)09$list=array();10$list =$valno_order;/当前行的第一列11$list =$valtitle;/当前行的第二列12$list =$valdisplaytype?显示:不显示;13$list =$valcom_ok?是:否;14$list =$valtop_ok?是:否;15$list =date(Y-m-d,strtotime($valupdatetime);16$rarray =$list;1718$table-rdata($rarray);19tabledata.class.php（表格数据类）表格效果：参数说明：data-table-ajaxurl表格数据来源，URLdata-table-pagelength表格每页显示条数，数值参数请写在table标签上表格筛选、搜索说明：能够实现让指定的input输入框或select下拉菜单输入信息后无刷新检索。input搜索框：1234select下拉菜单：下拉菜单筛选可以放在表格右上角或者表格头部theadth标签中。12导航栏显示3不显示4头部主导航条5尾部导航条6都显示7如果控件需要放在表格右上角建议用下面的HTML标签包裹。123456添加一级栏目78参数说明：data-table-search启用搜索，1为启用。启用搜索后，该搜索框或下拉菜单的name、value会被传递到表格数据源URL，只需要在那里获取到值并进行数据库查询即可。PHP代码示例：view sourceprint?01functiontable_edit_json()/表格数据获取02global$_M;0304/*获取表格ajax传递的参数*/05$term1=$_Mformsearch_title;/获取搜索关键词06$term2=$_Mformsearch_displaytype;/获取搜索关键词07$term3=$_Mformsearch_com_ok;/获取搜索关键词08/在还可以获取多个搜索关键词0910/*查询表*/11$search=$term1?and title like %$term1% :;/增加查询条件12$search.=$term2!=?and displaytype = $term2 :;/获取查询条件13$search.=$term3!=?and com_ok = $term3 :;/获取查询条件14/如果有更多查询条件，还可以继续增加1516$table= load:sys_class(tabledata,new);17$where=lang=$_Mformlang $search;/在条件语句中加入查询条件 $search18$order=no_order;19$array=$table-getdata($_Mtablenews,*,$where,$order);2021foreach($arrayas$key=$val)22$list=array();23$list =;24$list =;25$list =$valtitle;26$list =$valdisplaytype?显示:不显示;27$list =$valcom_ok?是:否;28$list =$valtop_ok?是:否;29$list =date(Y-m-d,strtotime($valupdatetime);30$list =编辑|删除;31$rarray =$list;3233$table-rdata($rarray);3435表格内容编辑说明：表格内容支持在线编辑并保存。表格需要嵌套form表单并设置数据保存的URL：189因为表格数据源支持返回HTML，因此在需要让用户设置的选项中返回input输入框。部分代码示例：1$rarraydata$i1=;这样，就可以在显示的页面对输入框进行编辑。但是编辑却无法保存，也不清楚到底保存的是哪些行的信息，我们需要一个保存按钮和每行设定一个选择项。选择项：在表格数据源中可以给每行设置选择项，建议放在第一列，name名称必须为id。1$rarraydata$i0=;/第一列然后，我们需要有个全选的选择项，请放在 table thead th 里面。1其中 input 的属性data-table-chckall=id 就是启用全选的功能。保存按钮：支持inputtype=submit或者select提交的方式。inputtype=submit：123456789请放在tfoot标签中，th中的colspan是表格单元格可横跨的列数，需要与表格的总列数相同，class=formsubmit是默认样式控制，请务必保留。select下拉菜单：010203040506推荐07是08否091011置顶12是13否14151617参数说明data-isubmit1为启用select提交表单，如需要将select做为表单提交功能，必须设置。下拉菜单选择提交后如何在表单处理页面进行处理？提交表单后，select的name和value能够被传递到form表单中，因此可以根据传递的值进行处理。如何获取需要保存的信息ID？保存信息时选中的行的选择项ID会以逗号,隔开，储存在name名称为allid的input中（该input隐藏不可见），因此可以在表单处理页面中通过 $_Mformallid 获取到选择项，拆分后就可以使用。有多个保存按钮，比如一个保存一个删除，提交后如何区分？inputsubmit提交的时候其name值会赋给name为submit_type的隐藏input，因此可以在表单处理页面中通过 $_Mformsubmit_type 来获取保存的类型。注意：1、表格如果嵌套form并加了ui-from类，那么表单验证功能也是支持的。2、inputtype=submit和select下拉菜单可以混合排列在一起实现多种处理方式的表格。表格动态增加行说明：设置一个链接或按钮，点击后可以动态增加一行，并且点击保存后可以将此行数据增加到数据库中。首先，需要设置一个按钮，一般放在表格左上角，以及表格底部：123添加一级栏目4567参数说明：data-table-addlist新增行的数据源URL，给链接或按钮设置此属性后，点击该按钮将会执行动态增加行，同时会给数据源传递一个不断增量的变量 $_Mformai，用于累计增加的数量和区分每个新增的行。数据源PHP代码示例：1functiondo_table_add_list()2global$_M;3$id=new-.$_Mformai;4$metinfo=返回的HTML代码;/HTML代码请看下面的示例5echo$metinfo;6返回的HTML代码：0102030405060708导航栏显示09$_MwordfunNav110$_MwordfunNav211$_MwordfunNav312$_MwordfunNav41314151617撤销18这样点击按钮或链接，页面表格底部就能自动增加一行。在执行保存的时候，为了区分每行的数据，可以设定新增行的选择项值为 new-$_Mformai ，这样在保存的时候可以用PHP分析带 new- 就是要新增的数据，上面PHP代码示例就很好的利用了这个方法。删除行说明：动态增加的行需要删除的时候就可以采用这个方式。用法：只需增加一个class为delet的链接或按钮即可，该按钮或链接需要放在该行的td代码中，一般放在最右边，点击后即可删除该行。示例代码：view sourceprint?010203040506070809撤销10表格其它说明：能够自定义表格每行class类，需要在表格数据来源中JSON的回传数据处理中增加。参数：toclass示例代码：01functiontable_list_json()02global$_M;03$table= load:sys_class(tabledata,new);04$where=lang=$_Mformlang;05$order=no_order;06$array=$table-getdata($_Mtablenews,*,$where,$order);0708foreach($arrayas$key=$val)09$list=array();10$list =$valno_order;11$list =$valtitle;12$list =$valdisplaytype?显示:不显示;13$list =$valcom_ok?是:否;14$list =$valtop_ok?是:否;15$list =date(Y-m-d,strtotime($valupdatetime);16$listtoclass =class1;/给该行定义class类17$rarray =$list;1819$table-rdata($rarray);20指定列设置class类说明：能够给指定一列设置class类，在 table thead th 标签上定义。参数：data-table-columnclass=定义class类名示例代码：010203排序04标题05前台06推荐07置顶08更新时间0910监听表格数据源事件说明：有时候需要调试数据，那么就需要监听表格数据源事件，支持监听表格数据加载完成后、点击分页，获取到服务器的数据尚未加载到页面时、点击分页，数据加载完成后。01$(document).on(init.dt,function(e, settings, json) /表格加载完成时执行02/json = JSON.stringify(json, null, 2 );03/alert(json); /输出JSON0405varapi =new$.fn.dataTable.Api( settings );06api.on(xhr.dt,function( e, settings, json ) /点击分页，获取到服务器的数据时07/json = JSON.stringify(json, null, 2 );08/alert(json);09);10api.on(draw.dt,function( e, settings, json ) /点击分页，数据重载完成后1112 );13);注意：JS代码建议编写到前端控件JS框架模块中，如果需要编写在页面中，请查看相应的资料。默认样式：适用于表格左上角的信息增加按钮。010203040506070809添加文章1011编写在table标签上面，一般与搜索框放在一起，搜索框在右边，增加按钮在左边。效果：带效果的class类：ui-float-left 左浮动ui-float-right 右浮动none 隐藏区块met-gray 灰色#9a9a9amet-center 内容居中ui-input 文本输入框样式自定义控件如果现有控件无法满足你的需求，你可以提交需求给我们，我们将会不断完善前端框架，以减少开发人员工作量。如果需要自定义执行JS或一些页面效果，可以采用本文档的方式。方法一：按系统内置JS代码架构底部foot.php文件路径：网站根目录appsystemincludepublicuiadminfoot.php默认会加载应用文件下/js/admin.js文件。admin.js文件代码结构：1define(function(r