Dojo Grid结合Ajax用法
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomerDefinedOutputField.aspx.cs" Inherits="SparkBiz.Payroll.CustomerDefinedOutputField" %>
<style>
@import "../public/prod1.5.37.1/dojo1.5/dijit/themes/claro/claro.css";
@import "../public/prod1.5.37.1/dojo1.5/dijit/themes/soria/soria.css";
@import "../public/prod1.5.37.1/dojo1.5/dijit/themes/nihilo/nihilo.css";
@import "../public/prod1.5.37.1/dojo1.5/dijit/themes/tundra/tundra.css";
@import "../public/prod1.5.37.1/dojo1.5/dojo/resources/dojo.css";
@import "../public/prod1.5.37.1/dojo1.5/dojox/grid/enhanced/resources/claroEnhancedGrid.css";
@import "../public/prod1.5.37.1/dojo1.5/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css";
@import "../public/prod1.5.37.1/dojo1.5/dijit/themes/claro/document.css"; #gridList
{
width:100%;
height:556px;
border:1px solid silver;
}
.spanClass {
color:red
}
</style> <div id="ListRoot" style="position:absolute; top:20px; width:100%;">
</div>
<script src="Modules/Payroll/JS/json2.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("revit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
</script> <%--Group类别样式--%>
<style type="text/css">
#ulGroup
{
font:12px verdana, arial, sans-serif;
}
#ulGroup li a
{
display:block;
padding:8px 20px;
text-decoration:none;
}
#ulGroup li a:hover
{
background:#4aabbe;
color:#fff;
text-decoration:none;
}
</style>
<%--构造列结构以及绑定控件事件--%>
<script type="text/javascript">
var gridCells =
[
{
field: "PRBatchFieldName",
name: "<%=RM.GetString("HeadDefinedYlX") %>",
width: "200px"
},
{
field: "TableName",
name: "<% = RM.GetString("TableName") %>",
formatter: SetTablesHtml,
width: "170px"
},
{
field: "FieldName",
name: "<% = RM.GetString("FieldName") %>",
formatter: SetFilesHtml,
width: "300px"
},
{
field: "LookUpField",
name: "LookUp",
formatter: SetLookUpHtml,
width: "200px"
}
]; //设置TableName样式
function SetTablesHtml(value, rowIndex) {
var grid = dijit.byId("gridList");
var index = grid.store.getValue(grid.getItem(rowIndex), "Index");
value = datas.items[index].TableName;
var selTabName = datas.items[index].selTabName;
var GroupName = datas.items[index].GroupName;
var innerHtml = "";
var array = value.toString().split(",");
if (GroupName == "Defined") {
innerHtml += "<select id='selTab" + index + "' style=\"width:100%;\;font-family:Tahoma;font-size:11px\" onchange=\"selectTable_onchange_click(this,'" + index + "')\">";
for (var i = 0; i < array.length; i++) {
var selStr = "";
if (array[i] == selTabName)
selStr = "selected=selected";
innerHtml += "<option " + selStr + " value = '" + array[i] + "'>" + array[i] + "</option>";
}
innerHtml += "</select>";
}
else {
gridCells[0].width = "200px";
innerHtml += "<span style=\"width:100%\">";
innerHtml += array[0];
innerHtml += "</span>";
}
return innerHtml;
} //设置Filed样式
function SetFilesHtml(value, rowIndex) {
var grid = dijit.byId("gridList");
var index = grid.store.getValue(grid.getItem(rowIndex), "Index");
value = datas.items[index].FieldName;
var selFieldName = datas.items[index].SelFieldName;
var GroupName = datas.items[index].GroupName;
var innerHtml = "";
var array = value.toString().split(",");
if (GroupName == "Defined") {
innerHtml += "<select id='selField" + index + "' style=\"width:100%;\font-family:Tahoma;font-size:11px\" onchange=\"selectField_onchange_click(this,'" + index + "')\">";
for (var i = 0; i < array.length; i++) {
var selStr = "";
if (array[i].split("/")[0] == selFieldName)
selStr = "selected=selected";
innerHtml += "<option " + selStr + " value = '" + array[i] + "'>" + array[i] + "</option>";
}
innerHtml += "</select>";
}
else {
innerHtml += "<span style=\"width:100%\">";
innerHtml += array[0];
innerHtml += "</span>";
}
return innerHtml;
} //设置LookUp样式
function SetLookUpHtml(value, rowIndex) {
var grid = dijit.byId("gridList");
var index = grid.store.getValue(grid.getItem(rowIndex), "Index");
value = datas.items[index].LookUpField;
var selLookup = datas.items[index].selLookup;
var GroupName = datas.items[index].GroupName;
var array = value.toString().split(",");
var innerHtml = "";
if (GroupName == "Defined") {
if (selLookup == "") {
innerHtml += "<select id='sellookup" + index + "' style=\"width:100%;\font-family:Tahoma;font-size:11px;display:none\" onchange=\"selectLookUp_onchange_click(this,'" + index + "')\">";
}
else {
innerHtml += "<select id='sellookup" + index + "' style=\"width:100%;\font-family:Tahoma;font-size:11px\" onchange=\"selectLookUp_onchange_click(this,'" + index + "')\">";
}
for (var i = 0; i < array.length; i++) {
var selStr = "";
if (array[i].split("/")[0] == selLookup) {
selStr = "selected=selected";
}
innerHtml += "<option " + selStr + " value = '" + array[i] + "'>" + array[i] + "</option>";
}
innerHtml += "</select>";
}
else {
innerHtml += "<span style=\"width:100%\">";
innerHtml += array[0];
innerHtml += "</span>";
}
return innerHtml;
} //Table Onchange事件
function selectTable_onchange_click(obj, rowIndex) {
//返回TableName值给jasonMain
datas.items[rowIndex].selTabName = obj.value; //找寻该表下的字段
SelectFieldByTable(obj.value, rowIndex);
} //Field Onchange事件
function selectField_onchange_click(obj, rowIndex) {
var fieldValue = obj.value.split("/")[0].toString();
if (fieldValue == null) { return false; }
//获取TableName
var seltableObj = document.getElementById("selTab" + rowIndex); //返回Field值给jasonMain
datas.items[rowIndex].SelFieldName = fieldValue;
SelectLookUpOrPickList(seltableObj.value, obj.value, rowIndex);
} //LookUp Onchange事件
function selectLookUp_onchange_click(obj, rowIndex) {
//返回LookUp值给jasonMain
datas.items[rowIndex].selLookup = obj.value.split("/")[0];
} </script> <%--事件处理方法--%>
<script>
var datas;
//生成数据Table
function SetDataSource(jsonObj, jsonGroup) {
datas = {
identifier: 'id',
label: 'id',
items: []
}; var i, len;
for (i = 0, len = jsonObj.length; i < len; ++i) {
datas.items.push(dojo.mixin({ 'id': i + 1 }, jsonObj[i % len]));
} var store = new dojo.data.ItemFileWriteStore({ data: datas }); var gridList;
gridList = new dojox.grid.DataGrid({
id: 'gridList',
canSort: false,//禁用列头排序功能
store: store,
structure: gridCells
}); gridList.placeAt('grid');
gridList.startup(); SetDataSourceByGroup("Defined");
} //判断字段是否已经被选择
function IsSelectdByField(TableName, FiledName, rowIndex) {
var arrays = new Array();
var dataItems = datas.items;
for (var i = 0; i < dataItems.length; i++) {
if (dataItems[i].GroupName != "Defined") { continue; }
if (dataItems[i].SelFieldName == null || dataItems[i].SelFieldName == undefined || dataItems[i].SelFieldName == "" || dataItems[i].SelFieldName == "undefined")
{ continue; }
if (dataItems[i].selTabName == TableName && dataItems[i].SelFieldName == FiledName) {
return true;
break;
}
}
return false;
} //查找字段通过TableName
function SelectFieldByTable(TableName, rowIndex) {
var FieldStr = null;
var flg = false;
var xhrObj = {
url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SearchFiledByTableName",
timeout: 50000,
handleAs: "json",
content: { "TableName": TableName },
form: null,
sync: true
};
//发起ajax请求
var def = dojo.xhrPost(xhrObj);
def.then(function (resp) {
if (resp) {
//操作响应数据
flg = true;
FieldStr = resp.FieldStr;
}
}, function (err) { alert(err); }); //赋值
datas.items[rowIndex].FieldName = FieldStr; if (FieldStr === null) { ClearDataAll(rowIndex); return; } //清除PickList和LookUp数据
ClearData(rowIndex); // 重新生成子阶option
addoptions("Table", "selField", rowIndex, FieldStr);
} //清空PickList和LookUp
function ClearData(rowIndex) {
//清除PickList和LookUp数据
var selLookUpObj = document.getElementById("sellookup" + rowIndex);
selLookUpObj.options.length = 0;
} //清空Field和PickList和LookUp
function ClearDataAll(rowIndex) {
//清除PickList和LookUp数据
var selFieldObj = document.getElementById("selField" + rowIndex);
selFieldObj.options.length = 0;
datas.items[rowIndex].SelFieldName = ""; //清除PickList和LookUp数据
var selLookUpObj = document.getElementById("sellookup" + rowIndex);
selLookUpObj.options.length = 0;
datas.items[rowIndex].selLookup = "";
document.getElementById("sellookup" + rowIndex).style.display = "none";
} //获取PickList或者LookUP
function SelectLookUpOrPickList(TableName, FiledName, rowIndex) {
var FieldStr = "";
var FieldType = "";
var flg = false;
var xhrObj = {
url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SearchFiledByFileName",
timeout: 50000,
handleAs: "json",
content: { "FiledName": FiledName, "TableName": TableName },
form: null,
sync: true
};
//发起ajax请求
var def = dojo.xhrPost(xhrObj);
def.then(function (resp) {
if (resp) {
//操作响应数据
flg = true;
FieldStr = resp.FieldStr;
FieldType = resp.jasonType;
}
}, function (err) { alert(err); }); var selFieldObj = null;
switch (FieldType) {
case "8"://LookUp
selFieldObj = "sellookup";
document.getElementById(selFieldObj + rowIndex).style.display = "";
break;
default:
document.getElementById("sellookup" + rowIndex).style.display = "none";
return;
} //赋值给选择的LookUp
datas.items[rowIndex].LookUpField = FieldStr; //清除PickList和LookUp数据
ClearData(rowIndex); if (selFieldObj == null) { return; } // 重新生成子阶option
addoptions(FieldType, selFieldObj, rowIndex, FieldStr);
} //添加Options
function addoptions(type, parentId, rowIndex, subarray) {
//获取父阶
var selFieldObj = document.getElementById(parentId + rowIndex);
//清除父阶
selFieldObj.options.length = 0;
//添加子阶
var array = subarray.toString().split(",");
for (var i = 0; i < array.length; i++) {
selFieldObj.options.add(new Option(array[i], array[i]));
}
if (array != null) {
switch (type) {
case "Table":
datas.items[rowIndex].SelFieldName = array[0].toString().split("/")[0].toString();
break;
case "8":
datas.items[rowIndex].selLookup = array[0].toString().split("/")[0].toString();
break;
default:
}
}
} //初始事件
function initPage_Load() {
var jsonMain = "";
var jsonTable = "";
var jsonGroup = "";
var flg = false;
var xhrObj = {
url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SearchDefineOutPutField",
timeout: 50000,
handleAs: "json",
form: null,
sync: true
};
//发起ajax请求
var def = dojo.xhrPost(xhrObj);
def.then(function (resp) {
if (resp) {
//操作响应数据
flg = true;
jsonMain = resp.jsonMain;
jsonGroup = resp.jsonGroup;
jsonTable = resp.jsonTable;
}
}, function (err) { alert(err); }); //生成Group
SetDataGroup(jsonGroup);
//定义第一个列类别，默认显示
var firstGroup = "";
if (jsonGroup.length > 0)
firstGroup = jsonGroup[0].GroupName;
//生成数据Table
SetDataSource(jsonMain, firstGroup);
} revit.addOnLoad(_container_, function () {
initPage_Load();
}); var arrayGroup;
//选择Group类别,过滤数据
function SetDataSourceByGroup(groupName) {
var grid = dijit.byId("gridList");
grid.focus.setFocusIndex(0, 1);
grid.setQuery({ GroupName: "" + groupName + "" });
} //单击Group类别,设置样式,过滤数据
function GroupClick(obj, value) {
if (value == "自定义") { value = "Defined"; }
if (value == "标准") { value = "Standard"; } //if(value == "Standard"){SaveDataByGroupClick();}
dojo.query("a").forEach(function (node, i) {
node.style.backgroundColor = "";
node.style.color = "";
});;
obj.style.backgroundColor = "#4aabbe";
obj.style.color = "#fff"; //数据过滤
SetDataSourceByGroup(value);
} //生成Group类别
function SetDataGroup(jsonObj) {
arrayGroup = new Array();
var ulInnerHtml = "";
var groupObj = document.getElementById("ulGroup");
if (jsonObj != "") {
var spanHtml = "";
for (var i = 0; i < jsonObj.length; i++) {
var groupName = jsonObj[i].GroupName; //类别名称
arrayGroup.push(groupName);
if (i == 0) {
ulInnerHtml += "<li><a href=\"#\" style=\"background-color:#4aabbe;color:#fff\" onclick=\"GroupClick(this,'" + groupName + "')\">" + groupName + "</a></li>";
spanHtml += "<span id=\"span" + groupName + "\" style=\"color:red;font-size:12px\" >" + groupName + "</span>";
}
else {
ulInnerHtml += "<li><a href=\"#\" onclick=\"GroupClick(this,'" + groupName + "')\">" + groupName + "</a></li>";
spanHtml += "<span id=\"span" + groupName + "\" style=\"display:none;color:red;font-size:12px\">" + groupName + "</span>";
}
}
}
groupObj.innerHTML = ulInnerHtml;
} //定义回传数据
function ItemsToJsonString() {
var arrays = new Array();
var dataItems = datas.items;
for (var i = 0; i < dataItems.length; i++) {
if (dataItems[i].GroupName != "Defined") { continue; }
//if (dataItems[i].SelFieldName == null || dataItems[i].SelFieldName == undefined || dataItems[i].SelFieldName == "" || dataItems[i].SelFieldName == "undefined")
//{ continue; }
var obj = new Object();
obj.ZHPR_DEFINEDTABLE = dataItems[i].selTabName;
obj.ZHPR_DEFINEDFILED = dataItems[i].SelFieldName;
obj.ZHPR_MAPPINGOBJECT = "ZHPR_PRBATCHEMPLOYEEPROFILEDATA." + dataItems[i].PRBatchFieldName;
obj.ZHPR_LOOKUPFILED = dataItems[i].selLookup;
obj.ZHPR_PICKLISTFILED = "";//dataItems[i].selPicklist;
arrays.push(obj);
}
return JSON.stringify(arrays);
} //获取需要保存的数据个数
function GetSaveCount() {
var count = 0;
var dataItems = datas.items;
for (var i = 0; i < dataItems.length; i++) {
if (dataItems[i].SelFieldName == null || dataItems[i].SelFieldName == undefined || dataItems[i].SelFieldName == "" || dataItems[i].SelFieldName == "undefined")
{ continue; }
count++;
}
return count;
} // 保存数据
function SaveData() {
//if (GetSaveCount() < 1) { alert("<%=RM.GetString("NotDataSave")%>"); return false; }
var flg = "F";
//定义ajax请求对象的属性
var xhrObj = {
url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SaveDefinedField",
timeout: 50000,
handleAs: "json",
content: { "dataJsonStr": ItemsToJsonString() },
form: null,
sync: true
};
//发起ajax请求
var def = dojo.xhrPost(xhrObj);
def.then(function (resp) {
if (resp) {
//操作响应数据
flg = resp.Message; //alert(resp.number);
}
}, function (err) { alert(err); return false; });
if (flg == "") { return false; }
dijit.byId('setImportTemplateForm').clearMessages();
if (flg == "T") {
dijit.byId("setImportTemplateForm").addInfoMessage('<%=RM.GetString("SaveSucceedMsg")%>');
}
else {
dijit.byId("setImportTemplateForm").addErrorMessage('<%=RM.GetString("SaveFailedMsg")%>');
}
setTimeout("dijit.byId('setImportTemplateForm').clearMessages();", 2000);
return false;
} function SaveDataByGroupClick() {
var flg = "F";
//定义ajax请求对象的属性
var xhrObj = {
url: HRnet.Environment.webServerRoot + "/Modules/Payroll/PayrollHandler.ashx?action=SaveDefinedField",
timeout: 50000,
handleAs: "json",
content: { "dataJsonStr": ItemsToJsonString() },
form: null,
sync: true
};
//发起ajax请求
var def = dojo.xhrPost(xhrObj);
def.then(function (resp) {
if (resp) {
//操作响应数据
flg = resp.Message; //alert(resp.number);
}
}, function (err) { alert(err); return false; });
if (flg == "") { return false; }
return false;
} //返回
function GoBack() {
var url = HRnet.Environment.webServerRoot + "/Main.aspx/Home?dojo.preventCache=" + new Date();
HRnet.Revolution.Form.DirtyPageCheck(
function () {
if (HRnet.Revolution.Form.RedirectToParentForm(false, false, true)) { return; }
dijit.byId(HRnet.Revolution.Constants.Appcontainter).set("href", HRnet.Revolution.Form.CancelActionUrl, true);
},
url);
}
</script> <%--窗体结构--%>
<div id="setImportTemplateForm" onkeypress="keyPress" style="width:100%;" enctype="multipart/form-data" dojotype="revit.form.Form" method="post" canSort="false">
<br />
<input type="hidden" id="hfMSTRID" />
<div class="soria" style="width:98%;">
<font size="1" >
<div dojoType="dijit.layout.SplitContainer"
orientation="horizontal"
sizerWidth="7"
activeSizing="false"
style="border: 1px solid #bfbfbf; float: left; width: 100%; height: 600px;" canSort="false"> <div dojoType="dijit.layout.ContentPane" style="width:15%; background-color:#e5f1f1" id="prog_menu" >
<ul id="ulGroup"> </ul>
</div> <div id="divContent" dojoType="dijit.layout.ContentPane" style="width:85%;border:2px;" sizeMin="40" sizeShare="50" canSort="false">
<table style="width:100%">
<tr>
<td>
<div id="grid" canSort="false"> </div>
</td>
</tr>
</table>
</div> </div>
<button id="btnSave" dojotype="revit.form.Button" iconclass="save16" showlabel="true" onclick="return SaveData()"><%=RM.GetString("Save")%></button>
</font>
</div>
</div>
Dojo Grid结合Ajax用法的更多相关文章
- dojo grid 编辑问题
今天dojo grid编辑小问题,找了半天才找到问题, 1.问题 2.原因 数据单元没有索引列->id 3.修改前代码 <!DOCTYPE HTML> <html lang=& ...
- Ajax 用法
Ajax 用法 var total=100; var orderName='sssss'; var orderDescrib='dddd ...
- dojo grid 分页
dojo很强大,也很方便,但是缺少文档,只能看源代码,也挺好的,就是费时间... 网上找了一段代码(找不到原出处了,不好意思),也看了dojo自带的demo,放一段可以执行的页面代码这里.把ip换成自 ...
- jQuery $.post $.ajax用法
jQuery $.post $.ajax用法 jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求 参数: url (Stri ...
- [转]Jquery Ajax用法
原文地址:http://www.php100.com/html/program/jquery/2013/0905/6004.html jQuery学习之jQuery Ajax用法详解 来源: 时间 ...
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- jQuery中的ajax用法案例
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...
- ajax用法流程
这里是用javascript做的一个ajax的一个用法以及总结概括.供友友们进行参考. 1 window.onload=function() { var oBtn=document.getElemen ...
- java web 之 AJAX用法
AJAX :Asynchronous JavaScript And XML 指异步 JavaScript 及 XML一种日渐流行的Web编程方式 Better Faster User-Friendly ...
随机推荐
- node - TypeError: argument handler must be a function 路由报错的原因
原因 : 路由一定要暴露给外部使用 var express = require('express') var router = express.Router() router.get('/', ...
- Docker Yearning + Inception SQL审核平台搭建
[一]安装[1.1]系统环境系统环境:CentOS Linux release 7.6.1708 (Core)系统内存:4G系统内核:1Python:3.6.4关闭iptables and selin ...
- 小程序地图开发周边信息POI展示为列表
##首先附上效果图 在我前面的文章中我详述过如何使用百度地图API来开发小程序的地图,所以这里面就不说基础内容了. 直说如下: ##1.如何获取列表: //分类存储 makertap: functio ...
- 127个常用的JS代码片段，每段代码花30秒就能看懂（上）
127个常用的JS代码片段,每段代码花30秒就能看懂(上) JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“如果你想学一门编程语言,请学JavaScript.” FreeCode ...
- php观察者模式。
第一次写博客,大家多多关照!欢迎拍砖哦! 我也刚学设计模式,所以记录下来. <?php class person{ public $name; public $birthday; public ...
- Flink on yarn以及实现jobManager 高可用(HA)
on yarn https://ci.apache.org/projects/flink/flink-docs-release-1.8/ops/deployment/yarn_setup.html f ...
- 十一、React 获取服务器数据： axios插件、 fetch-jsonp插件的使用
react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...
- hadoop的文件操作整理java
package dada; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; im ...
- HDU - 4430 Yukari's Birthday（二分+枚举）
题意:已知有n个蜡烛,过生日在蛋糕上摆蜡烛,将蜡烛围成同心圆,每圈个数为ki,蛋糕中心最多可摆一个蜡烛,求圈数r和看,条件为r*k尽可能小的情况下,r尽可能小. 分析:n最大为1012,k最少为2,假 ...
- 51nod 1435：位数阶乘
1435 位数阶乘 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 X是一个n位数的正整数 (x=a0a1...a ...