<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
<html>
|
|
<head>
|
<title>复选框</title>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
|
<link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
|
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
|
|
<!--[if lte IE 6]>
|
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">
|
<![endif]-->
|
<!--[if lte IE 7]>
|
<link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css">
|
<![endif]-->
|
<link rel="stylesheet" href="leipi.style.css">
|
<script type="text/javascript" src="../dialogs/internal.js"></script>
|
<script type="text/javascript">
|
function createElement(type, name) {
|
var element = null;
|
try {
|
element = document.createElement('<' + type + ' name="' + name + '">');
|
} catch (e) { }
|
if (element == null) {
|
element = document.createElement(type);
|
element.name = name;
|
}
|
return element;
|
}
|
|
|
//checkboxs
|
function isIE() {
|
if (window.attachEvent) {
|
return true;
|
}
|
return false;
|
}
|
//moveRow在IE支持而在火狐里不支持！以下是扩展火狐下的moveRow
|
if (!isIE()) {
|
function getTRNode(nowTR, sibling) {
|
while (nowTR = nowTR[sibling]) if (nowTR.tagName == 'TR') break;
|
return nowTR;
|
}
|
if (typeof Element != 'undefined') {
|
Element.prototype.moveRow = function (sourceRowIndex, targetRowIndex) //执行扩展操作
|
{
|
if (!/^(table|tbody|tfoot|thead)$/i.test(this.tagName) || sourceRowIndex === targetRowIndex) return false;
|
var pNode = this;
|
if (this.tagName == 'TABLE') pNode = this.getElementsByTagName('tbody')[0]; //firefox会自动加上tbody标签，所以需要取tbody，直接table.insertBefore会error
|
var sourceRow = pNode.rows[sourceRowIndex],
|
targetRow = pNode.rows[targetRowIndex];
|
if (sourceRow == null || targetRow == null) return false;
|
var targetRowNextRow = sourceRowIndex > targetRowIndex ? false : getTRNode(targetRow, 'nextSibling');
|
if (targetRowNextRow === false) pNode.insertBefore(sourceRow, targetRow); //后面行移动到前面，直接insertBefore即可
|
else { //移动到当前行的后面位置，则需要判断要移动到的行的后面是否还有行，有则insertBefore，否则appendChild
|
if (targetRowNextRow == null) pNode.appendChild(sourceRow);
|
else pNode.insertBefore(sourceRow, targetRowNextRow);
|
}
|
}
|
}
|
}
|
|
/*删除tr*/
|
function fnDeleteRow(obj) {
|
var oTable = document.getElementById("options_table");
|
while (obj.tagName != 'TR') {
|
obj = obj.parentNode;
|
}
|
oTable.deleteRow(obj.rowIndex);
|
}
|
/*上移*/
|
function fnMoveUp(obj) {
|
var oTable = document.getElementById("options_table");
|
while (obj.tagName != 'TR') {
|
obj = obj.parentNode;
|
}
|
var minRowIndex = 1;
|
var curRowIndex = obj.rowIndex;
|
if (curRowIndex - 1 >= minRowIndex) {
|
oTable.moveRow(curRowIndex, curRowIndex - 1);
|
}
|
|
}
|
/*下移*/
|
function fnMoveDown(obj) {
|
var oTable = document.getElementById("options_table");
|
while (obj.tagName != 'TR') {
|
obj = obj.parentNode;
|
}
|
var maxRowIndex = oTable.rows.length;
|
var curRowIndex = obj.rowIndex;
|
if (curRowIndex + 1 < maxRowIndex) {
|
oTable.moveRow(curRowIndex, curRowIndex + 1);
|
}
|
}
|
|
/*生成tr*/
|
function fnAddComboTr(obj) {
|
var oTable = document.getElementById('options_table');
|
var new_tr_node = oTable.insertRow(oTable.rows.length);
|
var new_td_node0 = new_tr_node.insertCell(0), new_td_node1 = new_tr_node.insertCell(1), new_td_node2 = new_tr_node.insertCell(2), new_td_node3 = new_tr_node.insertCell(3);
|
|
var sChecked = '';
|
if (obj.checked) sChecked = 'checked="checked"';
|
if (!obj.name) obj.name = '';
|
if (!obj.value) obj.value = '';
|
if (obj.value == null || typeof (obj.value) == undefined) obj.value = '';
|
if (obj.getAttribute && obj.getAttribute('text')) {
|
obj.text = obj.getAttribute('text');
|
} else if (!obj.text) {
|
obj.text = "";
|
}
|
new_td_node0.innerHTML = '<td><input type="checkbox" ' + sChecked + '></td>';
|
new_td_node1.innerHTML = '<td><input type="text" value="' + obj.text + '" name="' + obj.name + '" placeholder="选项"></td>';
|
new_td_node2.innerHTML = '<td><input type="text" value="' + obj.value + '" name="' + obj.name + '" placeholder="选项值"></td>';
|
new_td_node3.innerHTML = '<td><div class="btn-group"><a title="上移" class="btn btn-small btn-info" href="javascript:void(0);" onclick="fnMoveUp(this)"><i class="fa fa-arrow-up"></i></a><a title="下移" class="btn btn-small btn-info" href="javascript:void(0);" onclick="fnMoveDown(this)"><i class="fa fa-arrow-down"></i></a><a title="删除" class="btn btn-small btn-danger" href="javascript:void(0);" onclick="fnDeleteRow(this)"><i class="fa fa-close"></i></a></div></td>';
|
return true;
|
}
|
function fnAdd() {
|
var dName = $G('orgname').value;
|
if (!dName) {
|
alert("请先选择字段！");
|
return false;
|
}
|
fnAddComboTr({
|
"checked": false,
|
"name": dName,
|
"text": '',
|
"value": ''
|
});
|
}
|
|
/*组合checkbox*/
|
function fnParseOptions(gName, gItemDir, gEdit, gDataSource) {
|
var oTable = document.getElementById('options_table');
|
var nTr = oTable.getElementsByTagName('tr'), trLength = nTr.length, html = "";
|
var sDisabled = '';
|
if (gEdit == "0") {
|
sDisabled = 'disabled';
|
}
|
if (gDataSource == "0") {
|
for (var i = 0; i < trLength; i++) {
|
var inputs = nTr[i].getElementsByTagName('input');
|
if (inputs.length > 0) {
|
if (!inputs[1].value) continue;
|
var sChecked = '';
|
if (inputs[0].checked) sChecked = 'checked="checked"';
|
html += '<input id="' + gName + "_" + i + '" name="' + gName + '" text="' + inputs[1].value + '" value="' + inputs[2].value + '" ' + sChecked + ' ' + sDisabled + ' type="checkbox"/>' + inputs[1].value + ' ';
|
if (gItemDir == '1')//竖排
|
html += '<br/>';
|
}
|
}
|
} else {
|
html = '<input id="' + gName + '_1" name="' + gName + '" text="示例选项一" value="1" type="checkbox" ' + sDisabled + '/>示例选项一 ';
|
if (gItemDir == '1')//竖排
|
html += '<br/>';
|
html += '<input id="' + gName + '_2" name="' + gName + '" text="示例选项二" value="2" type="checkbox" ' + sDisabled + '/>示例选项二 ';
|
}
|
//alert(html);
|
return html;
|
|
}
|
</script>
|
</head>
|
|
<body>
|
<div class="content">
|
<table class="table table-bordered table-striped">
|
<tr>
|
<th>
|
<span>所属表名</span>
|
</th>
|
<th width="50%">
|
<span>字段名称</span>
|
<span class="label label-important">*</span>
|
</th>
|
</tr>
|
<tr>
|
<td>
|
<div class="input-group">
|
<input type="text" id="orgtablename" class="form-control">
|
<span class="input-group-btn">
|
<button class="btn btn-default">选表</button>
|
</span>
|
</div>
|
</td>
|
<td>
|
<div class="input-group">
|
<input type="text" id="orgname" class="form-control" placeholder="必填项">
|
<span class="input-group-btn">
|
<button class="btn btn-default" id="selectField">选字段</button>
|
</span>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<th>
|
<span>显示名称</span>
|
</th>
|
<th>
|
<span>排列方式 & 必填性 & 可编辑性</span>
|
</th>
|
</tr>
|
<tr>
|
<td>
|
<input id="orgdisplayname" type="text" class="form-control" />
|
</td>
|
<td>
|
<label class="radio-inline">
|
<input id="orgitemdir0" checked="checked" name="orgitemdir" type="radio"> 横排 </label>
|
<label class="radio-inline">
|
<input id="orgitemdir1" name="orgitemdir" type="radio"> 竖排 </label>
|
|
<label class="checkbox-inline">
|
<input id="orgrequired" type="checkbox" /> 必填 </label>
|
<label class="checkbox-inline">
|
<input id="orgedit" type="checkbox" checked /> 编辑 </label>
|
</td>
|
</tr>
|
<tr>
|
<th>
|
<span>数据源</span>
|
|
</th>
|
<th>
|
<span>默认值</span>
|
</th>
|
</tr>
|
<tr>
|
<td>
|
<label class="radio-inline">
|
<input id="orgdatasource0" checked="checked" name="orgdatasource" value="0" type="radio" onclick="dataSourceChange();"> 手工输入
|
</label>
|
<label class="radio-inline">
|
<input id="orgdatasource1" name="orgdatasource" value="1" type="radio" onclick="dataSourceChange();"> 关键字 </label>
|
<label class="radio-inline">
|
<input id="orgdatasource2" name="orgdatasource" value="2" type="radio" onclick="dataSourceChange();"> sql语句
|
</label>
|
</td>
|
<td>
|
<input type="text" id="orgdefaultvalue" class="form-control" style="display:none;">
|
</td>
|
</tr>
|
|
<tr id="tr_sgsr">
|
<td colspan="2">
|
<table class="table table-hover table-condensed" id="options_table">
|
<tr>
|
<th>选中</th>
|
<th>选项</th>
|
<th>选项值</th>
|
<th>操作</th>
|
</tr>
|
</table>
|
<a title="添加选项" class="btn btn-primary" onclick="fnAdd();">添加选项</a>
|
|
</td>
|
</tr>
|
<tr id="tr_key" style="display:none;">
|
<td colspan="2">
|
<div class="input-group" style="width:100%;">
|
<span class="input-group-addon">关键字</span>
|
<input type="text" id="orgkeyvalue" class="form-control">
|
<span class="input-group-btn">
|
<button class="btn btn-default" id="selectKey">选</button>
|
</span>
|
</div>
|
</td>
|
</tr>
|
<tr id="tr_sql" style="display:none;">
|
<td colspan="2">
|
<div class="input-group" style="width:100%;">
|
<span class="input-group-addon">sql语句</span>
|
<input type="text" id="orgsql" class="form-control">
|
|
</div>
|
</td>
|
</tr>
|
|
|
</table>
|
</div>
|
<script type="text/javascript">
|
var oNode = null, thePlugins = 'checkboxs';
|
window.onload = function () {
|
if (UE.plugins[thePlugins].editdom) {
|
oNode = UE.plugins[thePlugins].editdom;
|
var gTitle = oNode.getAttribute('title').replace(/"/g, "\"");
|
var gName = oNode.getAttribute('name').replace(/"/g, "\"");
|
var gTableName = oNode.getAttribute('orgtablename');
|
var gDataSource = oNode.getAttribute('orgdatasource');
|
var gKeyValue = oNode.getAttribute('orgkeyvalue');
|
var gSql = oNode.getAttribute('orgsql');
|
var gDefaultValue = oNode.getAttribute('orgdefaultvalue');
|
var gEdit = oNode.getAttribute('orgedit');
|
var gRequired = oNode.getAttribute('orgrequired');
|
$G('orgdisplayname').value = gTitle;
|
$G('orgname').value = gName;
|
$G('orgtablename').value = gTableName;
|
var gItemDir = oNode.getAttribute('orgitemdir');
|
gItemDir == '1' ? $G('orgitemdir1').checked = true : $G('orgitemdir0').checked = true;
|
gRequired == "1" ? $G('orgrequired').checked = true : $G('orgrequired').checked = false;
|
gDataSource == '0' ? $G('orgdatasource0').checked = true : (gDataSource == '1' ? $G('orgdatasource1').checked = true : $G('orgdatasource2').checked = true);
|
$G('orgkeyvalue').value = gKeyValue;
|
$G('orgsql').value = gSql;
|
$G('orgdefaultvalue').value = gDefaultValue;
|
gEdit == "1" ? $G('orgedit').checked = true : $G('orgedit').checked = false;
|
var inputTags = oNode.getElementsByTagName('input');
|
var length = inputTags.length;
|
var aInputs = [];
|
for (var i = 0; i < length; i++) {
|
//testEle.setAttribute("test","aaa"); // 自定义属性 设置
|
//testEle.attributes["test"].nodeValue; // 获得
|
if (inputTags[i].type == 'checkbox')
|
fnAddComboTr(inputTags[i]);
|
}
|
|
|
}
|
//初始化数据源
|
dataSourceChange();
|
//选字段
|
$G('selectField').onclick = function () {
|
openSelectField();
|
}
|
}
|
dialog.oncancel = function () {
|
if (UE.plugins[thePlugins].editdom) {
|
delete UE.plugins[thePlugins].editdom;
|
}
|
};
|
dialog.onok = function () {
|
if ($G('orgname').value == '') {
|
alert('字段名称不能为空!');
|
return false;
|
}
|
var gName = $G('orgname').value.replace(/\"/g, """);
|
var gTitle = $G('orgdisplayname').value.replace(/\"/g, """);
|
|
var gItemDir = '0';
|
if ($G('orgitemdir1').checked) gItemDir = '1';
|
|
var gTableName = $G('orgtablename').value;
|
var gDataSource = "0";
|
if ($G("orgdatasource1").checked) {
|
gDataSource = "1";
|
} else if ($G("orgdatasource2").checked) {
|
gDataSource = "2";
|
}
|
var gSql = $G('orgsql').value;
|
var gKeyValue = $G('orgkeyvalue').value;
|
var gDefaultValue = $G('orgdefaultvalue').value;
|
var gEdit = "1";
|
if (!$G("orgedit").checked) {
|
gEdit = "0";
|
}
|
var gRequired = "0";
|
if ($G("orgrequired").checked) {
|
gRequired = "1";
|
}
|
if (!oNode) {
|
try {
|
//var gTimestamp = new Date().getTime();//相同的gTimestamp为同一组checkbox
|
//var options = fnParseOptions(gTitle, gChecked, gTimestamp);
|
var options = fnParseOptions(gName, gItemDir, gEdit, gDataSource);
|
if (gDataSource == "0") {
|
if (!options) {
|
alert('请添加选项!');
|
return false;
|
}
|
}
|
//{|- 使用边界，防止用户删除了span标签，程序处理要把边界替换为空
|
var html = '{|-<span leipiplugins="checkboxs" title="' + gTitle + '" name="' + gName + '" orgtablename="' + gTableName + '" orgdatasource="' + gDataSource + '" orgkeyvalue="' + gKeyValue + '" orgdefaultvalue="' + gDefaultValue + '" orgsql="' + gSql + '" orgitemdir="' + gItemDir + '" orgedit="' + gEdit + '" orgrequired="' + gRequired + '">';
|
html += options;
|
html += '</span>-|}';
|
editor.execCommand('insertHtml', html);
|
return true;
|
} catch (e) {
|
try {
|
editor.execCommand('error');
|
} catch (e) {
|
alert('控件异常，请联系管理员！');
|
}
|
return false;
|
}
|
} else {
|
oNode.setAttribute('title', gTitle);
|
oNode.setAttribute('name', gName);
|
oNode.setAttribute('orgtablename', gTableName);
|
oNode.setAttribute('orgname', gName);
|
oNode.setAttribute('orgitemdir', gItemDir);
|
oNode.setAttribute('orgkeyvalue', gKeyValue);
|
oNode.setAttribute('orgdatasource', gDataSource);
|
oNode.setAttribute('orgsql', gSql);
|
oNode.setAttribute('orgdefaultvalue', gDefaultValue);
|
oNode.setAttribute('orgedit', gEdit);
|
oNode.setAttribute('orgrequired', gRequired);
|
oNode.innerHTML = fnParseOptions(gName, gItemDir, gEdit, gDataSource);
|
delete UE.plugins[thePlugins].editdom;
|
return true;
|
}
|
};
|
|
function openSelectField() {
|
top.layer.open({
|
title: "选择表字段",
|
type: 2,
|
area: ['1000px', '600px'],
|
fixed: false, //不固定
|
content: '/select/selectField.html'
|
});
|
|
}
|
|
function dataSourceChange() {
|
var sourceradio = document.getElementsByName("orgdatasource");
|
var tr_sgsr = document.getElementById("tr_sgsr");
|
var tr_key = document.getElementById("tr_key");
|
var tr_sql = document.getElementById("tr_sql");
|
var input_orgdefaultvalue = document.getElementById("orgdefaultvalue");
|
for (var i = 0; i < sourceradio.length; i++) {
|
if (sourceradio[i].checked) {
|
switch (i) {
|
case 0:
|
tr_sgsr.style.display = "";
|
tr_key.style.display = "none";
|
tr_sql.style.display = "none";
|
input_orgdefaultvalue.style.display = "none";
|
break;
|
case 1:
|
tr_sgsr.style.display = "none";
|
tr_key.style.display = "";
|
tr_sql.style.display = "none";
|
input_orgdefaultvalue.style.display = "";
|
break;
|
case 2:
|
tr_sgsr.style.display = "none";
|
tr_key.style.display = "none";
|
tr_sql.style.display = "";
|
input_orgdefaultvalue.style.display = "";
|
break;
|
}
|
|
return false;
|
}
|
}
|
|
}
|
</script>
|
</body>
|
|
</html>
|
