<!-- ztree -->
<link rel="stylesheet" type="text/css" href="plug-in/ztree/css/zTreeStyle.css"></link>
<script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.core-3.5.min.js" ></script>
<script type="text/javascript" src="plug-in/ztree/js/jquery.ztree.excheck-3.5.min.js"></script>

<!-- 文件上传 -->
<link rel="stylesheet" type="text/css" href="plug-in/webuploader/webuploader.css"></link>
<script type="text/javascript" src="plug-in/webuploader/webuploader.min.js" ></script>

<!-- 自动补全 -->
<link rel="stylesheet" href="plug-in/jquery/jquery-autocomplete/jquery.autocomplete.css" type="text/css"></link>
<script type="text/javascript" src="plug-in/jquery/jquery-autocomplete/jquery.autocomplete.min.js"></script>

<!-- 联动 -->
<script src="plug-in/jquery/jquery.regionselect.js" type="text/javascript"></script>

<fieldset>
<legend>文件上传</legend>
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
</div>
</div>
</fieldset>

<fieldset>
<legend>autocomplete</legend>
<table>
<tr>
<td style="width:90px;text-align: right;">用户名自动补全:</td>
<td>
<input type="text" id="userNameAuto" name="userName" class="ac_input">
</td>
</tr>
</table>
</fieldset>

<fieldset>
<legend>联动下拉省市区</legend>
<!-- update-begin_author:taoYan date:20170803 for:修复ie下样式变乱 -->
<div style="width:80%;margin:5px 0 0 10px;">
<input type="text" id="province" style="width:32%;" value=""/>
<input type="text" id="city" style="width:32%;" value=""/>
<input type="text" id="area" style="width:32%;" value=""/>
</div>
</fieldset>

<fieldset>
<legend>ztree</legend>
<div style="clear:both"></div>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</fieldset>
<!-- update-end-author:taoYan date:20170803 for:修复ie下样式变乱 -->

<fieldset>
<legend>ueditor</legend>
<table>
<tr>
<!-- <td align="right"><label class="Validform_label">demo:</label> -->
<td>
<script type="text/javascript" charset="utf-8" src="plug-in/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="plug-in/ueditor/ueditor.all.min.js"></script>
<textarea name="ueditorContent" id="ueditorContent" style="width: 650px;"></textarea>
<script type="text/javascript">
var editor = UE.getEditor('ueditorContent');
</script>
<span class="Validform_checktip"></span>
</td>
</tr>
</table>
</fieldset>
</t:formvalid>
<!-- update-end--Author:yugwu Date:20170626 for:[TASK #2135]【浏览器兼容问题】IE8下样式乱了-------------------- -->

<!-- update-begin--Author:taoYan Date:20170803 for:代码格式修改 -->
<script type="text/javascript">
function printobj(obj){
var str='[';
for(var a in obj){
str+=a+':'+obj[a]+",";
}
str+=0+':0]';
return str;
}
function getTremValueuserName() {
return $("#userNameAuto").val();
}
$(function() {
//ztree
var setting = {
check: {
enable: true
},
view: {
dblClickExpand: true
},
data: {
simpleData: {
enable: true
}
}
};
var zNodes=jQuery.parseJSON('${regions}');
$.fn.zTree.init($("#treeDemo"), setting, zNodes);

//省市区下拉
$("#province").regionselect({
url:'<%=basePath%>/jeecgFormDemoController.do?regionSelect'
});

/*-------------------------------------------文件上传----------------------------------------------*/
var urlc= '<%=basePath%>/systemController/filedeal.do';
var BASE_URL="<%=basePath%>";
var uploader = WebUploader.create({
// swf文件路径
swf: BASE_URL+'/plug-in/webuploader/Uploader.swf',
// 文件接收服务端。
server: urlc,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
//指明参数名称,后台也用这个参数接收文件
duplicate: false,
auto: true,
//每次上传附带参数
formData:{"uparg":"ggfile"}

});
uploader.on( 'fileQueued', function( file ) {
$("#thelist").append( '<div id="' + file.id + '" class="item">' +
'<div class="state">'+file.name+'---等待上传...</div>' +
'</div>' );
});

//文件上传过程中创建进度条实时显示.
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('div.state').html(file.name+'---上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function(file) {
$( '#'+file.id ).find('div.state').html(file.name+'---上传成功!');
});
uploader.on( 'uploadError', function( file) {
$( '#'+file.id ).find('div.state').html(file.name+'---上传出错');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut('slow');
});
/*-------------------------------------------文件上传----------------------------------------------*/

/*-------------------------------------------自动补全----------------------------------------------*/
$("#userNameAuto").autocomplete("jeecgFormDemoController.do?getAutocompleteData", {
max: 5,
minChars: 1,
width: 200,
scrollHeight: 100,
matchContains: true,
autoFill: false,
extraParams: {
featureClass: "P",
style: "full",
maxRows: 10,
labelField: "userName",
valueField: "userName",
searchField: "userName",
entityName: "TSUser",
trem: getTremValueuserName
},
parse: function(data) {
return jeecgAutoParse.call(this, data);
},
formatItem: function(row, i, max) {
return row['userName'];
}
}).result(function(event, row, formatted) {
$("#userNameAuto").val(row['userName']);
});
/*-------------------------------------------自动补全----------------------------------------------*/

$("div.webuploader-container").css("width","78px");

});
</script>
</body>
</html>
<!-- update-end--Author:taoYan Date:20170803 for:代码格式修改 -->

jeecg中的原生态组件的更多相关文章

  1. Bootstrap 中的 Typeahead 组件 -- AutoComplete

    Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...

  2. WPF中实例化Com组件,调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常

    WPF中实例化Com组件,调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常 在wpf中封装Com组件时,调用组件 ...

  3. EffectiveJava——请不要在代码中使用原生态类型

    先看一个栗子,看看能不能找出来里面的错误: /** * 请不要在新代码中使用原生态类型 * @author weishiyao * */ public class Test { public stat ...

  4. Titanium中调用ios组件时语言不是本地化的解决方法

    用Titanium开发的ios应用中,当调用系统组件时,尽管手机已经设置了系统语言为中文,但那些组件的界面却仍为英文.比如调用iphone中的相册组件,其界面为: 那么怎么让它跟系统语言保持一致呢? ...

  5. 第30课 Qt中的文本编辑组件

    1. 3种常用的文本编辑组件的比较 单行文本支持 多行文本支持 自定义格式支持 富文本支持 QLineEdit (单行文本编辑组件) Yes No No No QPlainTextEdit (多行普通 ...

  6. ExtJs中xtype与组件类的对应表

    from:http://blog.163.com/jx_dream/blog/static/117056627201223091021410/ 核心提示:我们在使用 ExtJs 创建组件时最容易理解的 ...

  7. 杂谈SharpDx中的WIC组件——我们需要WIC的图片编码功能么?

    在前文 SharpDX之Direct2D教程II——加载位图文件和保存位图文件 中,发现在VB2010中不能很好的运用SharpDx中的WIC组件进行图片的编码工作.可能是我的设置问题,也可能是Sha ...

  8. VC中调用COM组件的方法(转载)

    原文参考:http://hi.baidu.com/mingyueye/item/53ebecd44da76917d80e4449 总结一下在VC中调用COM组件的方法 准备及条件: COM服务器为进程 ...

  9. yii中的自定义组件

    yii中的自定义组件(组件就是一些自定义的公用类) 1.在项目目录中的protected/components/Xxxx.php 2.在Xxxx.php中定义一个类,类名必须与文件名相同 3.控制器中 ...

随机推荐

  1. dwz tree组件 取得所选择的值

    DWZ的树结构是按<ul>,<li>的嵌套格式构成,最顶级的<ul>以class=”tree”标识. treeFolder, treeCheck, expand|c ...

  2. TCP为什么是三次握手,为什么不是两次或者四次 && TCP四次挥手

    这是一个很有意思的问题~ 首先,我们要知道TCP是全双工的,即客户端在给服务器端发送信息的同时,服务器端也可以给客户端发送信息.而半双工的意思是A可以给B发,B也可以给A发,但是A在给B发的时候,B不 ...

  3. onmouseover和onmouseout的bug

    脑子不好用了,一点东西要看几遍才能记住,学过的东西也要好几遍,悲哀. 习惯了jquery的hover,或者看过hover源码,或者是正美的<框架设计>,onmouseover和onmous ...

  4. C#:String.Format数字格式化输出 {0:N2} {0:D2} {0:C2}...

    int a = 12345678; //格式为sring输出//   Label1.Text = string.Format("asdfadsf{0}adsfasdf",a);// ...

  5. docker小demo

    http://www.blogjava.net/yongboy/archive/2013/12/12/407498.html

  6. Python Django 前后端数据交互 之 后端向前端发送数据

    Django 前后台的数据传递 严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/archive/2016/05/30/5542612.html欢迎转载,但未 ...

  7. Webbrowser checkbox

    var  i:integer;  t:OleVariant;begin  t := EmbeddedWB1.Document;  for i := 0 to t.all.length - 1 do   ...

  8. 关于const的一些注意事项

    1.const对象必须初始化,一旦创建其值就无法更改 2.默认情况下,const对象仅在文件内有效,若想在多个文件中使用同一个const对象,就是不在每个文件独立的定义一个const对象,可以进行如下 ...

  9. Installing MIB in Ubuntu and Solving the Error “SNMP Cannot Find Module …”

    Has noticed an error after executing the command snmpwalk with the indication of MIB instead of OID: ...

  10. anu - react

    import { options } from "./util"; import { Children } from "./Children"; import ...