EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</head>
<body>
<style type="text/css">
#fm { } .ftitle {
font-size: 14px;
font-weight: bold;
padding: 5px ;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
} .fitem {
margin-bottom: 10px;
} .fitem label {
display: inline-block;
text-align: right;
width: 80px;
font-size: 13px;
padding-right: 10px;
} .fitem input {
width: 160px;
}
</style> <table id="list" class="easyui-datagrid" style="width: auto; height: 350px;" toolbar="#dlg-toolbar"></table> <div id="dlg-toolbar">
<table cellpadding="" cellspacing="" style="width:100%">
<tr> <td style="text-align:left">
<input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
</td>
</tr>
<tr>
<td>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" id="add" plain="true">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" id="edit" plain="true">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-clear" plain="true">Delete</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
</td>
</tr>
</table>
</div> <div id="dd" class="easyui-dialog" title="My Dialog" style="width:350px;height:290px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true" buttons="#dlg-buttons">
<form id="form" method="post" style="margin-top: 20px; margin-left: 20px;">
<div class="fitem" >
<label>商品编号:</label>
<input id="itemid" name="itemid" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>用户名:</label>
<input id="productid" name="productid" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>姓名:</label>
<input id="listprice" name="listprice" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>操作1:</label>
<input id="unitcost" name="unitcost" data-options="required:true,min:0,precision:5" style="" class="easyui-numberbox" editable="true" />
</div>
<div class="fitem" >
<label>操作2:</label>
<input id="attr1" name="attr1" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>操作3:</label>
<input id="status" name="status" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
</form>
</div> <div id="dlg-buttons">
<table cellpadding="" cellspacing="" style="width:100%">
<tr>
<td style="text-align:right">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" id='btnSave'>Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
</td>
</tr>
</table>
</div> </body>
<script> $("#list").datagrid({
iconCls: "icon-add",
fitColumns: false,
loadMsg: "数据加载中......",
data:[ { "productid": "K9-DL-01", "unitcost": , "status": "P", "listprice": , "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Venomless", "itemid": "EST-11" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Rattleless", "itemid": "EST-12" }, { "productid": "RP-LI-02", "unitcost": , "status": "P", "listprice": , "attr1": "Green Adult", "itemid": "EST-13" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "Tailless", "itemid": "EST-14" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "With tail", "itemid": "EST-15" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Female", "itemid": "EST-16" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-17" }, { "productid": "AV-CB-01", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-18" }, { "productid": "AV-CB-03", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-134" }] ,
pagination: true,
rownumbers: true,
nowrap: false,
showFooter: true,
singleSelect: true, columns: [[
{
field: 'itemid', title: '编号', width: , align: 'center',
formatter: function (value, row, index) {
return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>";
}
},
{
field: 'productid', title: '用户名', width: , align: 'center',
},
{
field: 'listprice', title: '姓名', width: , align: 'center',
},
{
field: 'unitcost', title: '操作1', width: , align: 'center',
},
{
field: 'attr1', title: '操作2', width: , align: 'center',
},
{
field: 'status', title: '操作3', width: , align: 'center',
}
]] })
$(function () {
$("#add").click(function(){
$('#dd').dialog({title:'创建'}).dialog('open');
$('#itemid').textbox("setValue",'');
$('#productid').textbox("setValue",'');
$('#listprice').textbox("setValue", '');
$('#unitcost').textbox("setValue", '');
$('#attr1').textbox("setValue", '');
$('#status').textbox("setValue", '');
});
$("#edit").click(function(){
var row = $("#list").datagrid("getSelected");
if(row==null){
layer.msg('没有选中记录', { icon: });
return;
}
$('#dd').dialog({title:'修改'}).dialog('open');
$('#itemid').textbox("setValue",row.itemid);
$('#productid').textbox("setValue", row.productid);
$('#listprice').textbox("setValue", row.listprice);
$('#unitcost').textbox("setValue", row.unitcost);
$('#attr1').textbox("setValue", row.attr1);
$('#status').textbox("setValue", row.status);
});
$("#delete").click(function(){ });
$("#btnSave").click(function () {
if ($('#form').form('validate')) {
$.ajax({
type: 'post',
url: '',
data: $("#form").serialize(),
success: function (result) {
if (result == "True") {
$('#dlg').dialog('close')
$('#list').datagrid('load', { })
layer.msg('保存成功', { icon: });
}
else {
layer.alert("保存失败");
}
}
});
}
});
});
</script>
</html>
EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七的更多相关文章
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...
- easyUI slider滑块，在加载出来后，easyUI slider滑块禁用方法
easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...
- DataGrid 的DataSource重新加载数据
DataGrid 的DataSource重新加载数据,若直接重新给DataSource赋值是没有效果的,若只是修改原有数据中的单个值,此方法有效,但是针对完全不一样的数据直接重新赋值的方式是无效的,此 ...
- html加载与脚本运行中，由于html未完全加载而导致脚本找不到dom元素无法执行事件
问题: 如题,就是说alert后出现一个对话框,我没有点关闭,其他js文件或html会被加载吗,我遇到一个问题就是在页面加载时调用一个div的click事件,却没有被执行,但是在调用事件前面加上ale ...
- 此编译单元不包含在frame元数据中指定的factoryClass，无法加载配置的运行时共享库
警告:此编译单元不包含在frame元数据中指定的factoryClass,无法加载配置的运行时共享库.要在没有运行时共享库的情况下进行编译,请将 -static-link-runtime-shared ...
- PHP+MySQL+Easyui tree菜单从后台加载json数据(一)
实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...
- EasyUI的treegrid组件动态加载数据问题的解决办法
http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...
- EasyUi 分页 和 表格数据加载
这里说明的是将说有数据先返回到前端再由前端去分页,性能可能没有先在后台分好页再返回给前端高 但如果操作不涉及大数据的话也没什么大问题,具体问题具体分析 要使用分页控件首先要声明初始化一下: //设置分 ...
- EasyUI ComboTree无限层级异步加载示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...
随机推荐
- Player Settings 导出设置
Player Settings is where you define various parameters (platform specific) for the final game that y ...
- 接口测试-webservice接口---soapui
1.添加项目 2.填入wsdl地址 3.编辑参数,运行接口
- jsch上传文件到服务器
需求就是上传文件到服务器,服务器的存储地址由程序决定然后可以自动创建. 使用第三方:jsch JSch 是SSH2的一个纯Java实现.它允许你连接到一个sshd 服务器,使用端口转发,X11转发,文 ...
- powerdesigner远程连接数据库
1. dabatase-->configure connections 2.新建连接 3.配置TNS连接测试 4.出现异常及处理 Could not Initialize JavaVM! 出现这 ...
- 《深入分析Java Web技术内幕》读书笔记 - 第1章 深入Web请求过程
第1章 深入Web请求过程 1 1.1 B/S网络架构概述 2 基于统一的应用层协议HTTP来交互数据. 1.2 如何发起一个请求 4 HTTP连接本质是建立Socket连接.请求实现方式:工具包如H ...
- 牛客多校第四场 F Beautiful Garden
链接:https://www.nowcoder.com/acm/contest/142/F来源:牛客网 题目描述 There's a beautiful garden whose size is n ...
- ubuntu下用vagrant搭建集群环境
1.安装virtualbox 终端输入:sudo apt-get install virtualbox(事实从来都不是一番风顺的.......) 正在读取软件包列表... 完成 正在分析软件包的依赖关 ...
- this 指向问题， 三个例子
'use strict'; var a = 20; function foo () { var a = 1; var obj = { a: 10, c: this.a + 20, fn: functi ...
- Linux fdisk命令操作磁盘(添加、删除、转换分区等)
创建分区1->查看原始分区sudo fdisk -l Disk /dev/sda: 21.5 GB, 21474836480 bytes255 heads, 63 sectors/track, ...
- 推荐系统-07-lambda架构
Lambda 架构 Lambda 架构由Storm的作者Nathan Marz提出,其设计目的在于提供一个能满足大数据系统关键特性的架构,包括高容错.低延迟.可扩展等.其整合离线计算与实时计算,融合不 ...