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 ...
随机推荐
- php ajax bootstrap多文件上传图片预览，ajax上传文件
<form enctype="multipart/form-data" id="upForm"> <label class="btn ...
- 【CSV文件】CSV文件内容读取
CSV(逗号分隔值文件格式) 逗号分隔值(Comma-Separated Values,CSV,有时也称为字符分隔值,因为分隔字符也可以不是逗号),其文件以纯文本形式存储表格数据(数字和文本).纯文本 ...
- laravel查找某个类拥有的方法：
1.在当前项目下,使用cmd窗口,输入: php artisan tinker 在输入: app('log') 显示出:Illuminate\Log\Writer 2.在phpstorm中按:shif ...
- 有多个.h引用时，不能有using namespace std
#include<iostream.h> #include<math.h> //using namespace std; 有多个.h引用时,不能有这个,否则无法运行. void ...
- java的八大排序
public class Sort2 { public static void main(String[] args) { Sort2 sort = new Sort2(); System.out.p ...
- day6-if,while,for的快速掌握
python的缩进和冒号 python之所以如此简单,归功于它的缩进机制,严格的缩进机制是的代码非常整齐规范,赏心悦目,提高了可读性,在一定意义上提高了可维护性,但对于从其他语音转过来的朋友如:jav ...
- 平面图转对偶图&19_03_21校内训练 [Everfeel]
对于每个平面图,都有唯一一个对偶图与之对应.若G‘是平面图G的对偶图,则满足: G'中每一条边的两个节点对应着G中有公共边的面,包括最外部无限大的面. 直观地讲,红色标出来的图就是蓝色标出的图的对偶图 ...
- C++基础知识：操作符重载
1.C++标准库: C++标准库并不是C++语言的一部分C++标准库是由C++语言编写而成的类库和函数的集合C++标准库中定义的类和对象都位于std命名空间中C++标准库的头文件都不带.h后缀C++标 ...
- 4.2 C++虚成员函数
参考:http://www.weixueyuan.net/view/6371.html 总结: virtual关键字仅用于函数声明,如果函数是在类外定义,则不需要再加上virtual关键字了. 在C+ ...
- 《图解HTTP》读书笔记（转）
reference:https://www.cnblogs.com/edisonchou/p/6013450.html 目前国内讲解HTTP协议的书是在太少了,记忆中有两本被誉为经典的书<H ...