基于jquery、模板引擎、自定义事件类实现GridView组件

完成效果:

需求:

根据数据配置来展示的类似GridView。

设计配置项:

datasource:[{},{}],     //数据源绑定 json格式
width:null,             //默认不设置 自动获取父节点的宽度
height:200,             //列表高度
pageModule:{                    //--分页配置--
    index:1,                    //当前页
    pageNum:50,                 //每页显示数量
    total:,                     //总数
    pageRate:[50,100,200,500],  //设置每页显示数量
    onChange:function(pIndex),  //分页事件回调
    onSetNum:function(pNum),    //设置每页显示数量
},
colHead:[    //列头合并用
    { title:"我是合并1",rowspan:2 }
],
colModule:[{            //--字段映射文本配置--
    name:"",            //属性名
    title:"",           //列头名
    width:100,          //宽度 例如:100=100px
    align:"left",       //对齐方式:left center right
    className:"",       //默认无样式  可添加空格分割的class 可控制子元素样式
    type:"Label",       //默认显示Label 输入框Text 选择框Select 弹层MaskSelect 4种
    formatter:null,     //function(val)  格式化数据用,只适用于Label与Text列
    bindDataSource:[],  //Select绑定数据 {key:"",value:""}
    triggerList:[       //绑定多个事件     {      triggerType:"blur",                                //绑定事件类型
        triggerChange:function(pData,pBtn,pRowPanel),         //绑定事件回调      }   ]
    onMask:function(pData,pBtn,pRowPanel){},                    //MaskSelect的click回调
}],
rowAddModule:"col1,col2,col3",            //行新增配置
templateModule:[],
/*[]调整
{
    isDisable:false,        //默认不禁用
    title:"修改",           //按钮文本
    class:"bluebtn",        //按钮样式  蓝色bluebtn 灰色graybtn 橘色orangebtn
    iClass:"icon-pencil",   //图标样式
    onChange:null           //点击回调 function(pData)
}*/
sortModule:{    //排序模块
    global:false       //是否全局排序  默认false 为true不执行本地排序但触发onChange
    onChange:function(sortName,sortOrder) //sortName排序属性、sortOrder排序方式 desc降序 esc升序
}
otherItems:[    //其他数据的配置功能
    { title:"",text:"" }
],
isCheckBox:false, //是否可选功能,列头全选:true false 默认falseisSort:true,     //是否开启排序 默认trueisNumber:true,   //是否自动序号 默认true
colOrderKey:"",
onDetail:null,       //function(pData,pDom)
onClick:null,        //function(pData)
onDoubleClick:null   //function(pData)

未完待续……

时间: 2024-10-01 21:49:51

基于jquery、模板引擎、自定义事件类实现GridView组件的相关文章

10 个强大的JavaScript / jQuery 模板引擎推荐

模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档.由于在开发过程中,网站或应用程序的界面与数据实现分离,大大提升了开发效率,良好的设计也使得代码重用变得更加容易.本文整理了10 款基于JavaScript和jQuery的模板引擎,希望能对你的开发工作带来一些帮助. 1. NANO 最简单的jQuery模板引擎,完美实现对JSON的解析. 源码 / 演示 2. The "template" binding 该工具通过渲染模板将相关联的DOM元素组织到一起.

javascript/jquery模板引擎——Handlebars初体验

最近自己在建一个站,采用完全的前后端分离的方式,现在正在做前端的部分.其中有项功能是需要ajax调用后端接口,返回json数据后要动态的插入数据.但是一开始我自己是用最"传统"的通过js拼接html字符串,然后再用jq插入到页面中.比如说下面的这个例子,我要显示一个个人信息卡: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <titl

cocos2dx自定义事件类封装

GameEvent.h: 1 #pragma once 2 #include "cocos2d.h" 3 USING_NS_CC; 4 5 class GameEvent { 6 public: 7 //封装派发数据 8 static void dispatchSet(std::string eventName, void *optionalUserData = nullptr); 9 static void dispatch(std::string eventName, void *

前端学PHP之自定义模板引擎

什么是网站模板?准确地说,是指网站页面模板,即每个页面仅是一个板式,包括结构.样式和页面布局,是创建网页内容的样板,也可以理解为已有的网页框架.可以将模板中原有的内容替换成从服务器端数据库中动态内容,目的是可以保持页面风格一致 PHP是一种HTML内嵌式的在服务器端执行的脚本语言,所以大部分PHP开发出来的Web应用,初始的开发模板就是混合层的数据编程.虽然通过MVC设计模式可以把程序应用逻辑与网页呈现逻辑强制性分离,但也只是将应用程序的输入.处理和输出分开,网页呈现逻辑(视图)还会有HTML代

PHP的自定义模板引擎

前面的话 在大多数的项目组中,开发一个Web程序都会出现这样的流程:计划文档提交之后,前端工程师制作了网站的外观模型,然后把它交给后端工程师,它们使用后端代码实现程序逻辑,同时使用外观模型做成基本架构,然后工程被返回到前端工程师继续完善.就这样工程可能在后端工程师和前端工程师之间来来回回好几次.由于后端工程师不干预任何相关HTML标签,同时也不需要前端代码和后端代码混合在一起.前端工程师只需要配置文件,动态区块和其他的界面部分,不必要去接触那些错综复杂的后端代码.因此,这时候有一个很好的模板支持

jquery的自定义事件通过on绑定trigger触发

jquery绑定自定义事件,可以实现预先绑定好一个处理方法,当需要使用的时候利用jquery trigger来触发自定义事件,以达到方便快捷的目的.我们来假设一个这样的场景,一个textarea中的字数计算,如果是直接键盘输入或者粘贴进来的话,是可以使用input方法检测到,但是如果是通过js插入的文本,这个时候input事件就监测不到了,这个时候如果我们事先给绑定一个myChange事件,它的回调函数就是来处理计算其中的文本字数的,我们在使用js给这个textarea赋值以后,连缀写上.tri

javascript和jquey的自定义事件小结

“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用对象B的某个方法,实现交互:直接方法调用本质上也是属于一种特殊的发送与接受消息,它把发送消息和接收消息合并为一个动作完成: 方法调用方和被调用方被紧密耦合在一起:因为发送消息和接收消息是在一个动作内完成,所以无法做到消息的异步发送和接收: 2)对象A生成消息->将消息通知给一个事件消息处理器(Obs

SpringBoot:模板引擎 Thymeleaf 基础使用

1    第2-3课:模板引擎 Thymeleaf 基础使用 1.1     模板引擎 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的 HTML 文档. 模板引擎的实现方式有很多,最简单的是"置换型"模板引擎,这类模板引擎只是将指定模板内容(字符串)中的特定标记(子字符串)替换,便生成了最终需要的业务数据(如网页). "置换型"模板引擎实现简单,但其效率低下,无法满足高负载的应用需求(比如有海量

Vue:Axios异步通信、计算属性、内容分发、自定义事件

1. Axios 什么是Axios Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架,她的主要作用就是实现 AJAX 异步通信,其功能特点如下: 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API [JS中链式编程] 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF(跨站请求伪造) GitHub:https://github.com/axios/axio