从API来看,它们之间视乎没有根本性的区别,下面看对比图,
我这里只列出了API文档中参数的对比图,两个类其他的API也与图中情况差不多,Dialog的API比较多,但几乎都涵盖了Window中的API
Window的API里面比Dialog多出了一样东西,那就是事件回调函数.
在 ligerWindow.js 中,我发现第46行,如下
l.controls.Window.ligerExtend(l.core.Win, {
同样我在 ligerDialog.js 中,104行,有同样的一句话,如下
l.controls.Dialog.ligerExtend(l.core.Win, {
这表示Dialog与Window是继承自同一个父类 l.core.Win,随后我查看了 js/core/base.js,在这个文件的770行我看到了 liger.core.Win 的真实面目.liger.core.Win 并没有做很多的事情,只实现遮罩功能和定义一些抽象接口.
最后我又重新回去阅读了 ligerDialog.js 的代码,从第 875 行开始一直到结束,这才是 Dialog 与 Window 最大的区别所在,Dialog 是单例对象,不建议在使用的时候继承与扩展,而 Window 是一个多例类,允许直接继承并扩展.
我拿出源码里面 5个 最基本的函数,来说明 Dialog 是单例类的事实：
$.ligerDialog.open = function (p)
{
// 实例化一个 l.controls.Dialog 对象
// 内部可以追述到第33行,使用 liger.run() 函数构造 Dialog 实例
return $.ligerDialog(p);
};
$.ligerDialog.close = function ()
{
// 根据 Dialog类型 查到到所有的 dialog 实例对象
var dialogs = l.find(l.controls.Dialog.prototype.__getType());
// 循环每一个 dialog实例并销毁
for (var i in dialogs)
{
var d = dialogs[i];
d.destroy.ligerDefer(d, 5);
}
// 隐藏遮罩层
// 在ligerUI中,所有的窗口使用的是一个全局的mask
// 相关代码可以看 js/core/base.js 598行
l.win.unmask();
};
$.ligerDialog.show = function (p)
{
var dialogs = l.find(l.controls.Dialog.prototype.__getType());
if (dialogs.length)
{
for (var i in dialogs)
{
// 如果已经存在 dialog实例,那么就直接使用实例对象
// 显示已存在的dialog,并返回
dialogs[i].show();
return;
}
}
// 如果不存在 dialog实例,则初始化一个实例并返回
return $.ligerDialog(p);
};
$.ligerDialog.hide = function ()
{
var dialogs = l.find(l.controls.Dialog.prototype.__getType());
// 隐藏dialog实例也是相同的方式
for (var i in dialogs)
{
var d = 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组件化设计得最好的一个框架.
从API来看，它们之间视乎没有根本性的区别，下面看对比图，我这里只列出了API文档中参数的对比图，两个类其他的API也与图中情况差不多，Dialog的API比较多，但几乎都涵盖了Window中的API，可以自行访问下面的网址查看：http://api.ligerui.com/Window的API里面比Dialog多出了一样东西，那就是事件回调函数。为什么他们的API这么接近，为啥不是一个东西呢？下面我找到了它的源码：http://git.oschina.net/ligerui/LigerUI/tree/Release/Source/lib/ligerUI/js/plugins在 ligerWindow.js 中，我发现第46行，如下l.controls.Window.ligerExtend(l.core.Win, {同样我在 ligerDialog.js 中，104行，有同样的一句话，如下l.controls.Dialog.ligerExtend(l.core.Win, {这表示Dialog与Window是继承自同一个父类 l.core.Win，随后我查看了 js/core/base.js，在这个文件的770行我看到了 liger.core.Win 的真实面目。liger.core.Win 并没有做很多的事情，只实现遮罩功能和定义一些抽象接口。最后我又重新回去阅读了 ligerDialog.js 的代码，从第 875 行开始一直到结束，这才是 Dialog 与 Window 最大的区别所在，Dialog 是单例对象，不建议在使用的时候继承与扩展，而 Window 是一个多例类，允许直接继承并扩展。我拿出源码里面 5个 最基本的函数，来说明 Dialog 是单例类的事实：$.ligerDialog.open = function (p){ // 实例化一个 l.controls.Dialog 对象 // 内部可以追述到第33行，使用 liger.run() 函数构造 Dialog 实例 return $.ligerDialog(p); };$.ligerDialog.close = function (){ // 根据 Dialog类型 查到到所有的 dialog 实例对象 var dialogs = l.find(l.controls.Dialog.prototype.__getType()); // 循环每一个 dialog实例并销毁 for (var i in dialogs) { var d = dialogs[i]; d.destroy.ligerDefer(d, 5); } // 隐藏遮罩层 // 在ligerUI中，所有的窗口使用的是一个全局的mask // 相关代码可以看 js/core/base.js 598行 l.win.unmask();};$.ligerDialog.show = function (p){ var dialogs = l.find(l.controls.Dialog.prototype.__getType()); if (dialogs.length) { for (var i in dialogs) { // 如果已经存在 dialog实例，那么就直接使用实例对象 // 显示已存在的dialog，并返回 dialogs[i].show(); return; } } // 如果不存在 dialog实例，则初始化一个实例并返回 return $.ligerDialog(p);};$.ligerDialog.hide = function (){ var dialogs = l.find(l.controls.Dialog.prototype.__getType()); // 隐藏dialog实例也是相同的方式 for (var i in dialogs) { var d = 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组件化设计得最好的一个框架。
Java代码
grid = $("#maingrid").ligerGrid({
height:'80%',
width:"100%",
columns: [
{ display: '项目名称', name: 'projectName', align: 'left', width: 100, minWidth: 60 },
{ display: '街镇名称', name: 'projectStreet', minWidth: 120 }
],
url:"${pageContext.request.contextPath}/houseStore/page",
root:"content",
record:"totalItems",
pagesizeParmName:"pageSize",
pageParmName:" currentPage",
pageSize:20,
method:"post",
dataAction:"server",
rownumbers:true,checkbox: true,
toolbar: { items: [
{ text: '增加', click: addObj, icon: '' },
{ line: true },
{ text: '修改', click: updateObj, icon: '' },
{ line: true },
{ text: '删除', click: deleteObj, icon: '' }
]
}
});
，后台代码如下
Java代码
public ResponseEntity> page(@RequestParam(value="currentPage",required=false) Integer currentPage,@RequestParam(value="pageSize",required=false) Integer pageSize){
}
LigerUI的分页方式有两种：local和server。
如果数据量不是很大，就直接采用local分页，一次性的把数据全部发送到前台来，之后LigerUI自身的grid会自动分页。说一下total，在后台传送jsonString时传送定义好的total（总条数），你可以定义多少都可以，但是到前台它会自动将总条数赋值给total，这是local下的方式。
而如果数据量很大，一次性加载直接不显示数据或反应很慢的，就需要用server分页了，当用server分页时，每次请求都会比local时多发送两个参数：page和pagesize，不需要自己去发送，只需要在后台获取就行，
int page=Integer.parseInt(request.getParameter("page"));
int pagesize=Integer.parseInt(request.getParameter("pagesize"));
int total;
这时你可以把page和pagesize写进你的sql语句：
sql=".........";
sql+=" limit "+(page*pagesize-pagesize)+","+pagesize;
这样查出的结果放入jsonString中，这里要注意total了，total需要自己定义，需要自己重新查一下结果的总条数后赋值给total传到页面，其他的LigerUI会帮你搞定！
引入Ligerui的
两个文件。
$(function () {
window['g'] =
$("#maingrid4").ligerGrid({
columns: [
{ display: '编号', name: 'id', align: 'left', width: 60, frozen: true },
{ display: '时间', name: 'date', type: 'date', format: 'yyyy-MM-dd hh:mm:ss', width: 110 },
{ display: 'thread', name: 'thread', width: 70, align: 'left' },
{ display: '级别', name: 'level', width: 60, align: 'left' },
{ display: '用户ID', name: 'UserID', width: 60, align: 'left' },
{ display: 'logger', name: 'logger', width: 80, align: 'left' },
{ display: '提示信息', name: 'Message', minWidth: 200, width: 400 },
{ display: '错误信息', name: 'Exception', width: 200 }
],
dataAction: 'server',
url:'../dblj/GetList4', pageSize: 30,
toolbar: { items: [{ text: '高级自定义查询', click: itemclick, icon: 'search2'}]
},
width: '90%', height: '80%', checkbox: false
});
$("#pageloading").hide();
});
function itemclick() {
g.options.data = $.extend(true, {}, g.getData());
g.showFilter();
}
在网上找到文件说需要修改showFilter.js文件下面这个位置
function loadData() {
var data = filter.getData();
if (g.dataAction == "server") {
//服务器过滤数据
loadServerData(data);
}
else {
//本地过滤数据
loadClientData(data);
}
}
改为：“g“改”p“
function loadData() {
var data = filter.getData();
if (p.dataAction == "server") {
//服务器过滤数据
loadServerData(data);
}
else {
//本地过滤数据
loadClientData(data);
}
}
后台通过string where = Request.Params["parms"];获取。
最后是对where反序列化组合成sql可以使用的条件就可以了。
$(#combox).ligerComboBox().getValue();
这样试试
这些是combox的所有方法
findTextByValue(value) 获取文本
findValueByText(text) 获取值
removeItem(item) 移除项(未完成)
insertItem(item) 插入项(未完成)
addItem(item) 新增项(未完成)
selectValue(value) 选择值
getValue() 获取值
updateStyle() 刷新控件
setValue(value) 设置值
setEnabled(value) 设置可用
setDisabled(value) 设置不可用
getGridHeight() 获取下拉表格的高度
getText() 获取显示文本
setText(value) 设置显示文本
reload() 重新加载数据
getSelected() 获取选择数据
$("#form2").ligerForm({
inputWidth: 200, labelWidth: 300, space: 40, rightToken:"",
fields: [
{ name: "ProductID", type: "hidden" },
{ display: "hardware vendor", name: "PreferredVendor", id: "PreferredVendor", newline: true,comboboxName: "PreferredVendor", type: "select",options: { data: [{ id: 1, text: 'asdf' },{ id: 2, text: 'jkl'}] },validate:{required:true } }
$("#toptoolbar").ligerToolBar( { items: [{ text: '增加', click: function (item) { alert(item.text); }, icon:'add' }, { line:true }, { text: '修改', click: itemclick }, { line:true }, { text: '删除', click: itemclick } ]});
$("#toptoolbar").ligerToolBar(
{ items: [{
text: '增加', click: function (item)
{
alert(item.text);
}, icon:'add'
},
{ line:true },
{ text: '修改', click: itemclick },
{ line:true },
{ text: '删除', click: itemclick }
]
