jQuery EasyUI

Easyui Demo网站：

推荐：http://www.cnblogs.com/Philoo/tag/jQuery/

   // 动态添加表格
   COMMON.addTab({
	title:"引入",
	tabId:"iframe_agencyin",
	url:"custIntroduce/agencyIn"
   });

   //动态显示数据
   COMMON.datagrid({
	url:'custIntroduce/listCompany',
	columns:[[
		{field:'ID',title:'操作',width:'8%',align:"center",formatter:function (value, row, index){
        	return ' <a data-id="'+row.ID+'" οnclick="detail(this);"><i class="Blue icon-forward"></i></a>';
        	}
       },
       {field:'CODE',title:'客户编号',width:'20%',align:"center",sortable:true},
       {field:'TYPE',title:'机构类型',width:'15%',align:"center",formatter: function (value, row, index){
				if(value==2){
					return '小贷方';
				}
				if(value==3){
					return '担保方';
				}
				if(value==5){
					return '咨询服务方';
				}
				if(value==6){
					return '银行';
				}
        	}}
        ]],
        toolbar:'#toolbar',
        queryParams:{
			"custName":$("#toolbar input").eq(0).val(),
			"custCode":$("#toolbar input").eq(1).val()
        },
        buttons:{
        }
	});

二、LigerUI

// 动态添加表格
window.parent.tab.addTabItem({ 
      url:'', 
      tabid:'', 
      text:'', 
      height:'' 
});

//动态显示数据
obj.ligerGrid({
      title : '指标实例管理', // 该DataGrid面板的标题文本
      height:'',
      columns:[
               {display:'',width:'',name:''},
               {render:function(rowdata,index,value){return rowdata.ID;}},
               {}
              ],
      url:'',
      parms:[{name:'',value:''}],//查询参数
      queryParams : {'width' : $(this).width()},// 当请求远程数据时，也可以发送额外的参数。
      iconCls : 'icon-edit',// 一个CSS类，将提供一个背景图片作为标题图标
      singleSelect : false, // 当true时只允许当前选择一行。默认false
      striped : true,// 当true时，单元格显示条纹。默认false 隔行换色
      nowrap : true,// :当true时，显示数据在同一行上。默认true。
      idField : 'INSTANCEID', // :说明哪个字段是一个标识字段
      pageNumber : 1,// 当设置分页属性时，初始化的页码编号。默认从1开始
      pageSize : 10,// 当设置分页属性是，初始化的页面大小。默认10行
      pageList : [ 10, 20, 30, 40, 50, 200 ],// 当设置分页属性时，初始化页面的大小选择清单。默认[10,20,30,40,50]

      pagination : true, // 当true时在DataGrid底部显示一个分页工具栏。默认false
      rownumbers : true, // 当true时显示行号。默认false
      border : true,// 表格是否出现边框，默认是出现的。false 时不出现
      fit : false,// 当True时设置该面板尺寸适合于它的父容器。默认false。
      collapsible : true, // 当定义时显示可折叠面板的按钮。默认false
      minimizable : false,// 当定义时显示最小化面板的按钮。默认false
      maximizable : false,// 当定义时显示最大化面板的按钮。默认false
      closable : false,// 当定义时显示关闭面板的按钮。默认false
      collapsed : false,// 当定义时该面板初始化时处于收缩状态。默认false
      minimized : false,// 当定义时该面板初始化时处于最小化状态。默认false
      maximized : false,// 当定义时该面板初始化时处于最大化状态。默认false。
      closed : false,// 当定义时该面板初始化时处于关闭状态。默认false
      href:一个url，加载远程数据并显示在面板中。
      loadMsg : '数据装载中......',// 当加载远程数据时，在面板中显示一个消息。默认Loading…

      // 排序的时候用到
      sortName : 'KPINAME',// 定义哪列可以排序
      sortOrder : 'desc',// 定义列的排列顺序，只能是'asc'或'desc'。默认asc
      remoteSort : false,
 });

//弹出框
$.ligerDialog.open({
      id:"signwindow",
      content: template, //样式数据模板
      width:800,
      height:420,
      title : "填写",
      isHidden:false,
      buttons : [
         { text: '保存', onclick: function (item, dialog) { signSubmit(dialog);},cls:'l-dialog-btn-highlight' },
         { text: '下载', onclick: function (item, dialog) { downloadReport(1);},cls:'l-dialog-btn-highlight' },
         { text: '打印', onclick: function (item, dialog) { printContent(1);dialog.close();},cls:'l-dialog-btn-highlight' },
         { text: '取消', onclick: function (item, dialog) { dialog.close(); } }
      ]
});

三、图片

//预览
$.fancybox({
      content:"<img class='w600 h400' src='"+src+"'>"
});

四、doc文档

//下载
window.location.href='';      //地址

//form方法
$("#from").form('load',对象);

//Tree

ztree = $.fn.zTree.getZTreeObj("editTree");
ztree.checkAllNodes(false)//先注销所有选中
var n = ztree.getNodeByParam("id", tree[i].id, null)
if(n){
     ztree.checkNode(n,true);//选中
}