弹出框中选项卡的运用(easyUI)
先看一下页面效果:
此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用
分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easyUI—dialog。再里面一个div是选项卡的,该选项卡也有ID,可通过id控制选项卡之间的跳转,其样式是easyUI—tabs,选项卡里面还有两个div并列,说明这弹出框中有两个选项卡,选项卡中有table,因为里面还需要加载两种类型的数据列表。
当然选项卡是套在弹出框里面的。因此HTML代码如下所示:
<!--挂接地块弹出框-->
<div id="layerSetDialog" class="easyui-dialog" closed="true">
<div id="projectTabs" class="easyui-tabs" data-options="border:false,headerWidth:90,fit:true">
<div title="全部地块">
<table id="allList"> </table>
</div>
<div title="已选地块">
<table id="someList"></table>
</div>
</div>
</div>
该挂接地块功能虽然都是在一个弹出框中实现,但还涉及了很多操作,因此JavaScript代码还是有很多。
首先点击挂接按钮,则会弹出一个弹出框,该弹出框中会有两个选项卡,在两个选项卡中加载两种类型数据,当这些都实现了,其弹出框弹出功能才算全部实现。
//定义一个全局变量用于存日程ID
var ssid="";
//挂接地块
function toSet(sid){
ssid=sid;
var dialog = $("#layerSetDialog");
showDialog(dialog, "挂接地块", 300, 400,function(){
var row=$("#allList").datagrid('getChecked');
if(row.length==0){
$.messager.alert('温馨提示','请选择要挂接的地块!','warning');
}else {
$.messager.confirm('温馨提示', '是否确定挂接?', function (r) {
if(r){
var row=$("#allList").datagrid('getChecked');
var arr=[];
$.each(row,function(i,row){
arr.push(row["id"]);
});
var json = {ids: arr.join(";"),sid:sid};
var data=getTextData("../updateLandparcelallList.hebe", json2str(json));
if(data=="success"){
// $('#allList').datagrid('reload');
// $('#someList').datagrid('reload');
allList();
someList(sid);
$("#allList").datagrid('clearChecked');
showMessageTop("挂接成功!",120);
$('#projectTabs').tabs('select', '已选地块');
}else{
$.messager.alert('温馨提示', '挂接失败!', 'error');
}
}
});
}
},function(){
dialog.dialog('close');
});
loadPermissionList(sid);
}
//加载列表
function loadPermissionList(sid){
allList();
someList(sid);
}
//加载未勾选地块列表
function allList(){
var grid = $("#allList");
var data=getJsonData("../getLandparcelallList.hebe");
var columnArr = [[
{field: 'ck', checkbox: true},
{field: 'id', title: 'id', hidden: true},
{field: 'landparcelname', halign: 'center', title: '地块名称', width: '100%'}
]];
var successFun = function () {
};
initDataGridByData(grid, true, "id", columnArr, data, false, successFun, undefined, undefined, "");
}
//加载已勾选地块
function someList(sid){
var gridObj = $("#someList");
var data=getJsonData("../getLandparcelsomeList.hebe",sid);
var columnArr = [[
{field: 'id', title: 'id', hidden: true},
{field: 'landparcelname', halign: 'center', title: '地块名称', width: '70%'},
{field: 'opt', title: '操作', width: '30%', align: 'center', resizable: false,
formatter: function (value, row, index) {
var id = row["id"];
var str = "";
str += '<a class="deletecls" onclick="toDeletel(' + id + ')" title="删除"></a>';
return str;
}
}
]];
var successFun = function () {
$('.deletecls').linkbutton({plain: true, iconCls: 'icon-remove'});
};
initDataGridByData(gridObj, false, "id", columnArr, data, false, successFun, undefined, undefined, "");
}
// 删除已勾选的地块
function toDeletel(lid){
$.messager.confirm('温馨提示','删除该挂接地块!是否确定删除?',function(r){
if(r){
var json = {ids: lid};
var data=getTextData("../updateLandparcelsomelist.hebe", json2str(json));
if(data=="success"){
// $('#someList').datagrid('reload');
//$('#allList').datagrid('reload');
someList(ssid);
allList();
showMessageTop("删除成功!",120);
$('#projectTabs').tabs('select', '全部地块');
}else{
$.messager.alter('温馨提示','删除失败!',error);
}
}
});
}
当弹出框弹出正常且所有数据都加载完毕,那就需要实现两个操作,一个是地块挂接,一个是挂接删除
对于地块挂接,可利用选项卡中的table列表的复选框来获取需挂接地块的id,然后通过弹出框的保存按钮回调方法来发送请求给后台进行地块挂接,挂接成功了再刷新两个列表,且选项卡自动跳转到另一个选项卡中去
对于地块挂接删除,可直接使用选项卡table列表中的删除按钮写一个方法,点击删除获取地块ID然后发送请求给后台进行操作,删除成功后,刷新两个列表,且跳转到另一个选项卡中去。
值得注意的是:
该两个选项卡的table列表数据是互补的,即此消彼长的。还有此处挂接删除,并不是实际意义的删除,而是将该数据中的一个日程id字段设为空即可。
对于后台即根据前台请求进行处理,没多大改变
弹出框中选项卡的运用(easyUI)的更多相关文章
- 苹果手机iOS11中fixed弹出框中input光标错位问题
最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...
- 在IOS11中position:fixed弹出框中的input出现光标错位的问题
问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...
- 弹出框中的AJAX分页
$(function() { $("body").on("click",".set-topic",function(){ /*获取所有题目接 ...
- 使用easeui dialog弹出框中使用CKeditor多次加载后无法编辑问题
问题呈现:弹出框页面 <tr class="addtr"> <th>内容</th> <td> <!-- <textare ...
- mvc 在弹出框中实现文件下载
var myParent = parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent.parent; ...
- vue在element-ui的dialog弹出框中加入百度地图
参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...
- firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出(解决方案)
问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...
- layer弹出框中icon数字参数说明
前言icon参数为0,如下代码: layer.msg(}); 运行结果如图: icon参数为1,如下图 icon参数为2,如下图: icon参数为3,如下图: icon参数为4,如下图: icon参数 ...
- IOS中position:fixed弹出框中的input出现光标错位的问题
解决方案是 在弹框出现的时候给body添加fixed <style type="text/css"> body{ position: fixed; width: 100 ...
随机推荐
- HashMap的尾部遍历问题--Tail Traversing
在看网上HashMap的resize()设计时,提到尾部遍历. JDK1.7的HashMap在实现resize()时,新table[]的列表采用LIFO方式,即队头插入.这样做的目的是:避免尾部遍 ...
- [Windows Server 2003] 还原SQL Server数据库
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:SQL Ser ...
- 注释及Scriptlet
1.显式注释 <!--xxxxxx-->,在正常页面上也看不出来,右键鼠标查看源代码可以看到 2.隐式注释 //xxxxx /*xxxxxx*/ <%--xxxxxxx--> ...
- WPF中的两个绑定场景
1. 如何在诸如ListBox这样的项中绑定父类数据上下文. <ListBox Grid.Row=" ItemsSource="{Binding Entries}" ...
- ats 与 https
一些证书相关的描述: https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKe ...
- Jenkins里jobs和workspace什么区别
https://segmentfault.com/q/1010000012575095/a-1020000012590560 简单的说,job 中保存的是项目是在 jenkins 上的配置.日志.构建 ...
- SQL几种常用的函数
函数的种类: 算数函数(数值计算的函数) 字符串函数(字符串操作的函数) 日期函数(用来进行日期操作的函数) 转换函数(用来转换数据类型和值的函数) 聚合函数(用来进行数据聚合的函数) 算数函数(+- ...
- CAD从二制流数据中加载图形(com接口)
主要用到函数说明: _DMxDrawX::ReadBinStream 从二制流数据中加载图形,详细说明如下: 参数 说明 VARIANT varBinArray 二制流数据,是个byte数组 BSTR ...
- Spring 注解注入的几种方式(转)
平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...
- python编程——断言
基本语法 assert_stmt ::= "assert" expression ["," expression] assert 5 > 3 # 肯定是对 ...