您的位置：首页 > 产品设计 > UI/UE

关于easyui datagrid中使用datebox设置默认值的方法

2016-08-07 16:19 519 查看
先来个扩展
$.extend($.fn.datagrid.defaults.editors, {
datebox: {
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
input.datebox(options);
return input;
},
destroy: function (target) {
$(target).datebox('destroy');
},
getValue: function (target) {
return $(target).datebox('getValue');//获得旧值
},
setValue: function (target, value) {
console.info(value);
$(target).datebox('setValue', value);//设置新值的日期格式
},
resize: function (target, width) {
$(target).datebox('resize', width);
}
}
});

关健的一点就是datagrid中datebox的显示格式一定要与datagrid中的格式相同，如databox的格式为：2016-08-04 ，那里 这一列的数据格式也必须为这个格式，如“qgdata1":"2016-01-03"

以下是所有全部代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ondate.aspx.cs" Inherits="ondate.ondate.ondate" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../cs/ui_icon.css" rel="stylesheet" />
<link href="../cs/ui_easyui.css" rel="stylesheet" />
<link href="../cs/ui_demo.css" rel="stylesheet" />
<link href="../cs/qg_css.css" rel="stylesheet" />
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/jquery.easyui.min.js"></script>
<script src="../js/easyui-lang-zh_CN.js"></script>
<script src="../js/jquery.edatagridforondate.js" charset="gbk"></script>
</head>
<body>

<script src="../js/jquery.edatagridforondate.js" charset="gbk"></script>
<div id="buttons" style="align-items: center;">
<a class="easyui-linkbutton" data-options="iconCls:'icon-add'" href="#" onclick="javascript:$('#dg').edatagrid('addRow')">增 加 </a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-save'" href="#" onclick="javascript:$('#dg').edatagrid('saveRow')">保 存 </a>
<a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" href="#" onclick="javascript:$('#dg').edatagrid('destroyRow')">删 除 </a>
</div>
<div style="border: 1px solid #1b76af;">
<table id="dg"></table>
</div>
<script>
var fieldstring = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,editman,convert( varchar(40),qgdate1,23) as qgdate1,qgdate2,datatype,filedid";
$("#dg").edatagrid({
queryParams: {
id: "datatype=N'值班安排管理'",
tbname: "qg_web_ondate",
fieldshow: fieldstring,
fieldorder: "qgdate1 desc"
},
pagination: true, pageSize: 25,
pageList: [25, 35],
width: "1160px", height: "530px",
url: "../handler/for_datalist.ashx",
singleSelect: true,
toolbar: "#buttons",
frozenColumns: [[
{ field: "m", title: "值班标题", width: 130, editor: "text" },
{ field: "qgdate1", title: "开始时间", width: 80, align: "right", editor: "datebox" },
]],
columns: [[
{ field: "filedid", title: "系统识别号", width: 100 },
{ field: "a", title: "公司领导", width: 80, editor: "text" },
{ field: "b", title: "工作部", width: 100, editor: "text" },
{ field: "c", title: "生术部", width: 150, editor: "text" },
{ field: "d", title: "检部", width: 150, editor: "text" },
{ field: "e", title: "发行部", width: 150, editor: "text" },
{ field: "f", title: "机班", width: 200, editor: "text" },
{ field: "g", title: "电班", width: 200, editor: "text" },
{ field: "h", title: "自班", width: 200, editor: "text" },
{ field: "i", title: "水班", width: 200, editor: "text" },
{ field: "j", title: "汽班", width: 80, editor: "text" },
{ field: "k", title: "仓库", width: 80, editor: "text" },
{ field: "l", title: "其它", width: 80, editor: "text" },
{ field: "editman", title: "编辑人", width: 100 },
{ field: "datatype", title: "所属类别", width: 60 },
{ field: "qgdate2", title: "修订时间", width: 80 }
]]
});
$.extend($.fn.datagrid.defaults.editors, {
datebox: {
init: function (container, options) {
var input = $('<input type="text">').appendTo(container);
input.datebox(options);
return input;
},
destroy: function (target) {
$(target).datebox('destroy');
},
getValue: function (target) {
return $(target).datebox('getValue');//获得旧值
},
setValue: function (target, value) {
console.info(value);
$(target).datebox('setValue', value);//设置新值的日期格式
},
resize: function (target, width) {
$(target).datebox('resize', width);
}
}
});
</script>
</body>
</html>


convert( varchar(40),qgdate1,23) as qgdate1 这一名就是格式sql查询出来的时间格式为“2016-01-01”，与datebox中文格式相同

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航