ligerui文件上传
‘壹’ ligerui treenode 有哪些属性
ligerTree的功能列表： 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5,支持获取选中行等常见的接口方法 二，第一个例子 引入库文件 遵循LigerUI系列插件的设...
‘贰’ ligerUI中ligerDialog和ligerWindow的区别
从API来看，它们之间视乎没有根本性的区别，下面看对比图，
$.ligerDialog.open=function(p)
{
//实例化一个l.controls.Dialog对象
//内部可以追述到第33行，使用liger.run()函数构造Dialog实例
return$.ligerDialog(p);
};
$.ligerDialog.close=function()
{
//根据Dialog类型查到到所有的dialog实例对象
vardialogs=l.find(l.controls.Dialog.prototype.__getType());
//循环每一个dialog实例并销毁
for(variindialogs)
{
vard=dialogs[i];
d.destroy.ligerDefer(d,5);
}
//隐藏遮罩层
//在ligerUI中，所有的窗口使用的是一个全局的mask
//相关代码可以看js/core/base.js598行
l.win.unmask();
};
$.ligerDialog.show=function(p)
{
vardialogs=l.find(l.controls.Dialog.prototype.__getType());
if(dialogs.length)
{
for(variindialogs)
{
//如果已经存在dialog实例，那么就直接使用实例对象
//显示已存在的dialog，并返回
dialogs[i].show();
return;
}
}
//如果不存在dialog实例，则初始化一个实例并返回
return$.ligerDialog(p);
};
$.ligerDialog.hide=function()
{
vardialogs=l.find(l.controls.Dialog.prototype.__getType());
//隐藏dialog实例也是相同的方式
for(variindialogs)
{
vard=dialogs[i];
d.hide();
}
};
$.ligerDialog.tip=function(options)
{
//初始化选项参数
options=$.extend({
showType:'slide',
width:240,
modal:false,
height:100
},options||{});
$.extend(options,{
fixedType:'se',
type:'none',
isDrag:false,
isResize:false,
showMax:false,
showToggle:false,
showMin:false
});
//构造一个Dialog实例
return$.ligerDialog.open(options);
};
根据上面的代码解读，结论就很清晰了：
Dialog是一个单例对象，不建议继承与扩展
Window是多例类，允许继承并扩展
我觉得ligerUI对Window的设计没有 Ext 设计得好，Dialog应作为Window的一个单例对象才相对合理，Ext就是这么做的。有兴趣的话，可以了解下Ext，Ext是目前我认为前端UI组件化设计得最好的一个框架。
‘叁’ ligerui编写三个tab页，能出界面但点击tab不能按预期掉转页面
https://my.oschina.net/u/3004032/blog/865021 参考此博客的方法，提供了两种
‘肆’ 前端用xml+js+htm组成的是什么框架，大部分代码都是在js文件中实现的
现在多数用json不用xml，前端框架的话，有很多，轻量级的有easyui、ligerui（完全免费）等，重量级的ext。商业使用很多都是收费的，所以看你什么需求了。个人认为功能上讲ext最好，还可以用sencha architect来直接开发，不过学习成本较高，学会了ext，easyui和ligerui就是小case。
‘伍’ jquery上传文件是怎么实现的
本篇文章是对Jquery中的LigerUI实现文件上传的方法，进行了分析介绍，需要的朋友可以参考下
一、在Head中加入
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
二、Html中的Div代码
复制代码 代码如下:
<div id="AppendBill_Div" style="display:none;"> <%-- 上传 - 单 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
图标:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
</div>
三、Js中-写的是关键部分，会LigerUI的朋友-你懂得
1、grid中添加项【存地址字段】
{ display: "扫描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加项【存地址和弹出选择框】
{ name: "AppendBillPath1", type: "hidden" }, // --上传-【5】--
{ display: "扫描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // --上传-【6】--
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【扫描件】 // --上传-【7】--
3、事件
// #region ======================================= 【上传扫描件窗口】 // --上传-【8】--
复制代码 代码如下:
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 单号
if (imageurl.length == 0) {
LG.showError("您没有输入单号，请输入随单号！");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}
else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加图标',
width: 360, height: 170, top: 170, left: 280, // 弹出窗口大小
buttons: [
{ text: '上传', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
function AppendBillPath_save()
{
var imgurl = $("#fileupload").val();
// var filehelpcode = $("#filehelpcode").val();
var extend = imgurl.substring(imgurl.lastIndexOf("."), imgurl.length);
extend = extend.toLowerCase();
if (extend == ".jpg" || extend == ".jpeg" || extend == ".png" || extend == ".gif" || extend == ".bmp")
{
}
else
{
LG.showError("请上传jpg,jpep,png,gif,bmp格式的图片文件");
return;
}
var imageurl = $("#AppendBill").val(); // extend
alert(imageurl);
$.ajaxFileUpload({
url: "../handle/ImageUpload.aspx?imageurl=" + imageurl, // --上传-【9】-- aspx文件
secureuri: false,
fileElementId: "fileupload", //Input file id
dataType: "text",
success: function (data, status)
{
// ----------------- // 保存路径
// $("#AppendBillPath2").val(Data);
LG.tip(data);
f_reload();
},
error: function (data, status, e) {
LG.showError(data);
}
});
}
// #endregion
四、后台cs，写一句关键的，可以返回参数，前台提示
string url = Server.MapPath("/Image/" + gfilename + filenameext); // 执行上传操作
‘陆’ 如何实现Jquery的LigerUI文件上传
获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：
$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性
2
集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。
3
支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。连写代码风格估计是jQuery最有特色之一了。
例如：
$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][ i ]});
4
操作元素的样式
主要包括以下几种方式：
$("#msg").css("background"); //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色
END
网络经验:jingyan..com
学习jQuery该注意哪些
1
学习jQuery，要自己写代码，深入到开发中锻炼，理论结合实际，才会提升价值，不断的去实践，不断在实际代码中找出他们的规律，发现他们的原理，以及他们之间相互的关系，才能提升jQuery，才能理解jQuery的精髓。
‘柒’ 如何实现Jquery的LigerUI文件上传
实现Jquery的LigerUI文件上传的实现方法：
1、在head标签中加入js引用：
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>
2、定义上传表格：
<div id="AppendBill_Div" style="display:none;"> <%-- 上传表单 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
图标:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
3、编写上传的js逻辑
1、grid中添加项【存地址字段】
{ display: "扫描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加项【存地址和弹出选择框】
{ name: "AppendBillPath1", type: "hidden" },
{ display: "扫描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}}
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1)
3、事件
// #region ======================================= 【上传扫描件窗口】
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 单号
if (imageurl.length == 0) {
LG.showError("您没有输入单号，请输入随单号！");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加图标',
width: 360, height: 170, top: 170, left: 280, // 弹出窗口大小
buttons: [
{ text: '上传', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
‘捌’ 如何实现Jquery的LigerUI文件上传
在Head中加入
<script src="../lib/js/ajaxfileupload.js" type="text/javascript"></script>
<script src="../lib/js/ligerui.expand.js" type="text/javascript"></script>Html中的Div代码
<div id="AppendBill_Div" style="display:none;"> <%-- 上传 - 单 --%>
<table style="height:100%;width:100%">
<tr style="height:40px">
<td style="width:20%">
图标:
</td>
<td><input type="file" style="width:200px" id="fileupload" name="fileupload"/>
</td>
</tr>
</table>
</div>Js中-写的是关键部分，会LigerUI的朋友-你懂得
1、grid中添加项【存地址字段】
{ display: "扫描件", name: "AppendBillPath", width: 120, type: "text", align: "left" }
2、Form可添加项【存地址和弹出选择框】
{ name: "AppendBillPath1", type: "hidden" }, // --上传-【5】--
{ display: "扫描件", name: "AppendBillPath", comboboxName: "AppendBillPath2", newline: true, labelWidth: 100, width: 150, space: 30, type: "select", options: {}} // --上传-【6】--
$.ligerui.get("AppendBillPath2").set('onBeforeOpen', f_selectAppendBillPath_1) // 【扫描件】 // --上传-【7】--
3、事件
// #region ======================================= 【上传扫描件窗口】 // --上传-【8】--
var AppendBillPathDetail = null;
function f_selectAppendBillPath_1() {
var imageurl = $("#AppendBill").val();
var AppendBill_Id = $("#AppendBill").val(); // 单号
if (imageurl.length == 0) {
LG.showError("您没有输入单号，请输入随单号！");
return;
}
if (AppendBillPathDetail) {
AppendBillPathDetail.show();
}
else {
AppendBillPathDetail = $.ligerDialog.open({
target: $("#AppendBill_Div"), title: '添加图标',
width: 360, height: 170, top: 170, left: 280, // 弹出窗口大小
buttons: [
{ text: '上传', onclick: function () { AppendBillPath_save(); } },
{ text: '取消', onclick: function () { AppendBillPathDetail.hide(); } }
]
});
}
}
function AppendBillPath_save()
{
var imgurl = $("#fileupload").val();
// var filehelpcode = $("#filehelpcode").val();
var extend = imgurl.substring(imgurl.lastIndexOf("."), imgurl.length);
extend = extend.toLowerCase();
if (extend == ".jpg" || extend == ".jpeg" || extend == ".png" || extend == ".gif" || extend == ".bmp")
{
}
else
{
LG.showError("请上传jpg,jpep,png,gif,bmp格式的图片文件");
return;
}
var imageurl = $("#AppendBill").val(); // extend
alert(imageurl);
$.ajaxFileUpload({
url: "../handle/ImageUpload.aspx?imageurl=" + imageurl, // --上传-【9】-- aspx文件
secureuri: false,
fileElementId: "fileupload", //Input file id
dataType: "text",
success: function (data, status)
{
// ----------------- // 保存路径
// $("#AppendBillPath2").val(Data);
LG.tip(data);
f_reload();
},
error: function (data, status, e) {
LG.showError(data);
}
});
}
// #endregion、后台cs，写一句关键的，可以返回参数，前台提示
string url = Server.MapPath("/Image/" + gfilename + filenameext); // 执行上传操作