您的位置：首页 > Web前端 > JQuery

深度改造的基于JQuery的Flexigrid插件

2010-07-29 00:17 579 查看
深度改造的基于JQuery的Flexigrid插件

经改造后可以完美的和Struts2 json plugin或ASP.NET LINQ进行整合，而不用再进行字符串拼接出插件所需要的数组数据

效果如图



数据格式如下：(基于对象的数据模型，彻底改变了原版基于数组的数据模型，简化了数据生成的开发)



相关的API：

控制到数据显示前的处理，如处理Null,处理超链接等，同时也提供了在表格显示完后，在其他代码中能访问到表格的一些相关数据的功能

控制到指定行数据的显示样式

控制到数据加载完后的处理

控制到行单击或双击事件

动态修改表格标题等

...

如下为页面代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="js/flexigrid/css/flexigrid/flexigrid.css" mce_href="js/flexigrid/css/flexigrid/flexigrid.css">
<mce:script type="text/javascript" language="javascript" src="js/jquery-1.4.2.min.js" mce_src="js/jquery-1.4.2.min.js"></mce:script>
<mce:script type="text/javascript" language="javascript" src="js/flexigrid/flexigrid.js" mce_src="js/flexigrid/flexigrid.js"></mce:script>
<mce:script type="text/javascript" language="javascript"><!--

function PageInit()
{
InitTable();
}

function InitTable()
{
$("#flexTest").flexigrid
(
{
url: 'showDwIndexData.php'
,dataType: 'json'
,colModel :
[
{display: 'DocumentId', name : 'documentId', width : 80, sortable : true, align: 'center'}
,{display: 'DocumentGroup', name : 'documentGroup', width : 105, sortable : true, align: 'center'}
,{display: 'Status', name : 'status', width : 80, sortable : true, align: 'center'}
,{display: 'FileName', name : 'fileName', width : 180, sortable : true, align: 'center'}
,{display: 'FileFormat', name : 'fileFormat', width : 80, sortable : true, align: 'center'}
,{display: 'FileSize', name : 'fileSize', width : 80, sortable : true, align: 'left'}
,{display: 'CreateDate', name : 'createDate', width : 80, sortable : true, align: 'left',hide: false}
,{display: 'AccessionNumber', name : 'accessionNumber', width : 160, sortable : true, align: 'center',hide: false}
,{display: 'AccessionNumber', name : 'accessionNumber', width : 60, sortable : true, align: 'center',hide: false}
]
,sortname: "documentId"
,sortorder: "asc"
,singleSelect: true
,usepager: true
,title: 'DwIndex'
,useRp: true
,rp: 10
,height: 305
//,width:'auto'
,buttons : [
{name: 'Add', bclass: 'add', onpress : AddDwIndex},
{name: 'Edit', bclass: 'edit', onpress : EditDwIndex},
{name: 'Delete', bclass: 'delete', onpress : DeleteDwIndex},
{separator: true}
],
searchitems : [
{display: 'DocumentId', name : 'documentId', isdefault: true},
{display: 'Status', name : 'status'}
]

,userConfig://add by tony
{
tableid:"flexTest"//
,dataname:"dwIndexOOData"//dwIndexOOData,dwIndexFGData"
,dataid:"documentId"//for the data tansform
,loadingpic:"loading"//for the ajax request and waiting

,showCheckBox:true//for checkbox
,showDeletebtn:true//for delete button,this button's display depends on showCheckBox,if true then it work.
,showAddbtn:true//for add button
,showEditbtn:true//for edit button
,showLineNum:true//for line number

,addFunc:"AddDwIndex"//for the add button
,editFunc:"EditDwIndex"//for the edit button
,delFunc:"DeleteDwIndex"//for the delete button
,trClick:diTRClick//for table row onclick
,trProcess:diTRProcess//for table row process before show
,beforeLoading:beforeLoadingDI//for the table data process before loading
,afterLoading:afterLoadingDI//for other process something need after loading data
}
// ,userParams:{}//{name:"",value:""}
// ,disbtn:""//["btnSearch"]//buttons need to disable
// ,pager:
// {
// isPostBack:true
// ,isConditionNull:true
// ,isResetPage:true//reset the page index for reload the data
// //,page:""
// //,rp:""
// //,sortname:""
// //,sortorder:""
// }
}
);
}
function AddDwIndex(){}
function EditDwIndex(i,editBtn,tableid){alert("Edit"+i)}
function DeleteDwIndex(){}
function diTRClick(i)
{
//alert("trClick"+i)
}
function diTRProcess(i,row,tr)
{
//if(row.cell[7]=="PDF")
if(row.fileFormat=="PDF")
{
tr.className="";
tr.style.color="red";
tr.style.backgroundColor="#FAEBD7";
}
return tr;
}
function beforeLoadingDI(data)
{
var rows=data.dwIndexOOData.rows;
for(var i=0,j=rows.length;i<j;i++)
{
rows[i].createDate=rows[i].createDate.substring(0,10);
}
data.dwIndexOOData.rows=rows;
rows=null;
return data;
}
function afterLoadingDI(){}
// --></mce:script>
</head>

<body onload="PageInit();">
<div style="position:relative; left:0px; top:0px;">
<table id="flexTest" style="display:none" mce_style="display:none"></table>
<img id="loading" src="images/wait_big.gif" mce_src="images/wait_big.gif" style=" position:absolute; left:50%; top:50%;" />
</div>
</body>
</html>

如有需要可以加我MSN:tony.tang1985@hotmail.com或QQ523260276 , 欢迎点评！！你们的关注就是我的动力，谢谢！！

Web技术开发研究群，11990602，欢迎入群
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航